HTML DOM TouchEvent Object

HTML Web Development Front End Technology

The HTML DOM TouchEvent Object represents an event which incurs on interaction with the HTML document elements using touch devices.

Here, “TouchEvent” can have the following properties and methods −

Property/Method	Description
altKey	Itreturns a Booleanvalue corresponding to the state if alt key was pressed when atouch event was fired
changedTouches	Itreturns aTouchList object corresponding to a list of all contact pointstriggered on a state change of touch events
ctrlKey	Itreturns a Booleanvalue corresponding to the state if ctrl was pressed when a touchevent was fired
metaKey	Itreturns a Booleanvalue corresponding to the state if meta was pressed when a touchevent was fired
shiftKey	Itreturns a Booleanvalue corresponding to the state if shift was pressed when a touchevent was fired
targetTouches	Itreturns a TouchList object corresponding to a list of all contactpoints triggered on a touch surface, If a touch is triggered onthe specified node or any of its child nodes then the followingtouches will only count if they are also triggered on the samenode
touches	Itreturns aTouchList object corresponding to a list of all contact pointstriggered on a touch surface, If a touch is triggered on thespecified node or any of its child nodes then the followingtouches will count even if they are not triggered on the same node

Note: We ran Touch event examples on Online HTML Editors accessed on Mobile or systems with touch access. This is done so that we can perform touch operations like touch the screen for 2 seconds.

Let us see an example of TouchEvent ctrlKey property −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM TouchEvent ctrlKey</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
   legend{
      border-color: #dc3545;
   }
   span {
      display: inline-block;
      width: 40px;
      height: 20px;
      margin: 1px;
      color: #fff;
      border: 3px solid black;
   }
   div span:nth-child(1){
      background-color: #FF8A00;
   }
   div span:nth-child(2){
      background-color: #F44336;
   }
   div span:nth-child(3){
      background-color: #03A9F4;
   }
   div span:nth-child(4){
      background-color: #4CAF50;
   }
</style>
</head>
<body>
   <form id="formSelect" ontouchstart="eventAction(event)">
      <fieldset>
         <legend>HTML-DOM-TouchEvent-ctrlKey</legend>
         <label for="textSelect">Background Color Changer</label>
         <div><span>alt</span><span>Ctrl</span><span>Meta</span><span>Shift</span></div>
         <div id="divDisplay">No HotKey Pressed</div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var formSelect = document.getElementById("formSelect");
   function eventAction(event) {
      if(event.ctrlKey){
         formSelect.style.backgroundColor = '#F44336';
         formSelect.style.color = '#FFF'
         divDisplay.textContent = 'ctrl Key Pressed';
      }
   }
</script>
</body>
</html>

Output

Before triggering touch event −

After triggering touch event with alt key pressed −

Also, “TouchEvent” can have the following event types −

Event	Description
ontouchcancel	Thetouchcancel event is triggered when one or more touch events areinterrupted
ontouchend	Thetouchend event is triggered when touch is removed from touchscreen
ontouchmove	Thetouchmove event is triggered when touch is moved across the touchscreen
ontouchstart	Thetouchstart event is triggered when touch screen is touched

Let us see an example of ontouchend event property −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM touchend event</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 50%;
      font-size: 20px;
      padding: 20px;
      border: 5px solid rgb(220, 53, 69);
      background: rgba(220, 53, 69, 0.5);
      color: #fefefe;
   }
</style></head>
<body>
   <form>
      <fieldset>
         <legend>HTML-DOM-touchend-event</legend>
         <label for="textSelect">Game Time</label>
         <input type="button" id="gameSelect" value="Hold On">
         <div id="divDisplay">Hold On for 1 - sec to Win</div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var gameSelect = document.getElementById("gameSelect");
   var duration = 1000;
   var timer;
   gameSelect.ontouchstart = startEventAction;
   function startEventAction() {
      timer = setTimeout(victory, duration);
   }
   gameSelect.ontouchend = endEventAction;
   function endEventAction(){
      if(timer)
         clearTimeout(timer);
   }
   function victory(){
      divDisplay.textContent = "You Win"
   }
</script>
</body>
</html>

Output

Before touching the ‘Hold On’ button −

After touching the screen ‘Hold On’ button −

AmitDiwan

Updated on: 29-Oct-2019

100 Views

Kickstart Your Career

Get certified by completing the course

Get Started