HTML DOM TouchEvent targetTouches Property

Web DevelopmentFront End Technology

The HTML DOM TouchEvent targetTouches property returns a TouchList object corresponding to a list of all contact points triggered on a touch surface.

NOTE: If a touch is triggered on the specified node or any of its child nodes then the following touches will only count if they are also triggered on the same node.

Following is the syntax −

Returning TouchList object

event.targetTouches

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 targetTouches property −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>TouchEvent targetTouches</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
   <form id="formSelect" ontouchstart="startEventAction(event)" ontouchend="endEventAction(event)">
      <fieldset>
         <legend>TouchEvent-targetTouches</legend>
         <label for="textSelect">Game Players Selector</label>
         <div id="divDisplay">All Players Place a Finger on Screen<br>Game Starting in 2 sec</div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var gameSelect = document.getElementById("formSelect");
   var duration = 2000;
   var timer;
   gameSelect.ontouchstart = startEventAction;
   function startEventAction(event) {
      timer = setTimeout(function(){
         eventAction(event)
      }, duration);
   }
   function endEventAction(event){
      if(timer)
      clearTimeout(timer);
      eventAction(event);
   }
   function eventAction(event) {
      var players = event.targetTouches.length;
      divDisplay.textContent = 'Total Players: '+players;
      gameSelect.removeAttribute('ontouchstart');
      gameSelect.removeAttribute('ontouchend');
   }
</script>
</body>
</html>

Output

Before touching form element −

After touching form element for 2 seconds −

raja
Published on 29-Oct-2019 10:21:53
Advertisements