Skip to content
Related Articles

Related Articles

HTML | DOM TouchEvent

View Discussion
Improve Article
Save Article
Like Article
  • 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:

  1. ontouchstart:When a finger is placed on a touch screen, ontouchstart event occurs. Syntax:
<p ontouchstart="TouchFunction()">Touch me</p>
  1. 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>

  1. Output:
    • Before touching the screen:
    • After touching the screen:
  2. ontouchmove:When user moves finger over touch screen, ontouchmove event occurs. Syntax:
<p ontouchmove="TouchFunction()">Touch me</p>
  1. 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>

  1. Output:
    • Before moving the fingers over screen:
    • After moving the fingers over screen:
  2. ontouchend:When user removes the finger from an event over touch screen, ontouchend event occurs. Syntax:
<p ontouchend="TouchFunction()">Touch me</p>
  1. 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>

  1. 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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!