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