Skip to content
Related Articles

Related Articles

HTML | DOM TouchEvent
  • Last Updated : 01 Feb, 2019

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>
    

    Example-1:




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

    Example-2:




    <!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:
  3. ontouchend:When user removes the finger from an event over touch screen, ontouchend event occurs.
    Syntax:
    <p ontouchend="TouchFunction()">Touch me</p>
    

    Example-3:




    <!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
  • Mozilla Firefox
  • Edge
My Personal Notes arrow_drop_up
Recommended Articles
Page :