HTML | DOM TouchEvent
Last Updated :
13 Jun, 2022
When a user touches a touch-based device the resulted events are handled by TouchEvent Object. The touch events consist of three types of interfaces i.e. Touch, TouchEvent and TouchList. The single contact point events on a touch-sensitive device are handled by the Touch interface. The events which have a list of contact points with a touch surface, one touch point per contact are handled by TouchList interface. When an event is sent which have the state of contacts with touch-sensitive surface changes, those events are handled by TouchEvent interface. Event Type:
- ontouchstart:When a finger is placed on a touch screen, ontouchstart event occurs. Syntax:
<p ontouchstart="TouchFunction()">Touch me</p>
- Example-1:
html
<!DOCTYPE html>
<html>
<head>
<title>DOM touchstart Event</title>
</head>
<body>
<p ontouchstart="TouchFunction()">Touch me!</p>
<p id="p1"></p>
<script>
function TouchFunction() {
document.getElementById(
"p1").innerHTML = "Hello World";
}
</script>
</body>
</html>
|
- Output:
- Before touching the screen:
- After touching the screen:
- ontouchmove:When user moves finger over touch screen, ontouchmove event occurs. Syntax:
<p ontouchmove="TouchFunction()">Touch me</p>
- Example-2:
html
<!DOCTYPE html>
<html>
<head>
<title>DOM touchmove Event</title>
</head>
<body>
<p ontouchmove="TouchFunction()">Touch me!</p>
<p id="p1"></p>
<script>
function TouchFunction() {
var x = event.touches[0].clientX;
var y = event.touches[0].clientY;
document.getElementById("p1").innerHTML =
"X & Y coordinate of current touch point is:"
+ x + ", " + y;
}
</script>
</body>
</html>
|
- Output:
- Before moving the fingers over screen:
- After moving the fingers over screen:
- ontouchend:When user removes the finger from an event over touch screen, ontouchend event occurs. Syntax:
<p ontouchend="TouchFunction()">Touch me</p>
- Example-3:
html
<!DOCTYPE html>
<html>
<head>
<title>DOM touchstart Event</title>
</head>
<body>
<p ontouchend="TouchFunction()">Touch me!</p>
<p id="p1"></p>
<script>
function TouchFunction() {
document.getElementById(
"p1").innerHTML = "Hello World";
}
</script>
</body>
</html>
|
- Output:
- Before removing the fingers from screen:
- After removing the fingers from screen:
Supported Browsers:
- Google Chrome 22 and above
- Mozilla Firefox 52 and above
- Edge 79 and above
- Opera 15 and above
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...