HTML / CSS / JavaScript Tutorial

JavaScript DOM TouchEvent property: changedTouches

[this page | pdf | back links]

The changedTouches property of TouchEvent objects within the JavaScript DOM returns a TouchList of all the Touch objects representing those points of contact where the state has changed between previous touch event and this one.



<!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