HTML / CSS / JavaScript Tutorial

JavaScript DOM TouchEvent property: targetTouches

[this page | pdf | back links]

The targetTouches property of TouchEvent objects within the JavaScript DOM returns a TouchList of all the Touch objects representing those points of contact that are both currently in contact with touch surface and were also started on same element as the event target.



<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
Try clicking on this box to see impact of a touchstart event
(note: support for touch events, especially ones other than touchstart is complex and seems to vary by browser):
<p id="element" style="background-color: yellow; border: 2px solid black; width: 200px; height: 80px;"><br><br></p>

<em>TouchEvent outcomes are:</em><br>
altKey: <b id="touch1"></b><br>
changedTouches: <b id="touch2"></b><br>
ctrlKey: <b id="touch3"></b><br>
metaKey: <b id="touch4"></b><br>
shiftKey: <b id="touch5"></b><br>
targetTouches: <b id="touch6"></b><br>
touches: <b id="touch7"></b><br>
number (of touches) in touches: <b id="touch8"></b><br>
<em>properties of first touch in touches:</em><br>
clientX: <b id="touch9"></b><br>
clientY: <b id="touch10"></b><br>
identifier: <b id="touch11"></b><br>
pageX: <b id="touch12"></b><br>
pageY: <b id="touch13"></b><br>
screenX: <b id="touch14"></b><br>
screenY: <b id="touch15"></b><br>
target: <b id="touch16"></b><br>

var x = document.getElementById("element");
x.addEventListener("touchstart", mytouchstart, false);
function mytouchstart(event) {
  event.preventDefault();  // stops mouse event also being triggered
  document.getElementById("touch1").innerHTML = event.altKey;
  document.getElementById("touch2").innerHTML = event.changedTouches;
  document.getElementById("touch3").innerHTML = event.ctrlKey;
  document.getElementById("touch4").innerHTML = event.metaKey;
  document.getElementById("touch5").innerHTML = event.shiftKey;
  document.getElementById("touch6").innerHTML = event.targetTouches;
  document.getElementById("touch7").innerHTML = event.touches.toString();
  document.getElementById("touch8").innerHTML = event.touches.length;
  var y = event.touches[0];
  document.getElementById("touch9").innerHTML = y.clientX;
  document.getElementById("touch10").innerHTML = y.clientY;
  document.getElementById("touch11").innerHTML = y.identifier;
  document.getElementById("touch12").innerHTML = y.pageX;
  document.getElementById("touch13").innerHTML = y.pageY;
  document.getElementById("touch14").innerHTML = y.screenX;
  document.getElementById("touch15").innerHTML = y.screenY;
  document.getElementById("touch16").innerHTML = y.target;


Contents | Prev | Next | JavaScript DOM (and BOM)

Desktop view | Switch to Mobile