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.
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
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>
<script>
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;
}
</script>
</body>
</html>
|
NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)