HTML DOM TouchEvent Object

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 −

Updated on: 29-Oct-2019

81 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements