HTML | DOM 触摸事件

当用户触摸基于触摸的设备时，产生的事件由TouchEvent Object处理。触摸事件由三种类型的接口组成，即Touch 、 TouchEvent和TouchList 。触敏设备上的单个接触点事件由 Touch 接口处理。
具有触摸表面的接触点列表的事件，每个接触一个接触点由 TouchList 接口处理。当发送触敏表面的接触状态发生变化的事件时，这些事件由 TouchEvent 接口处理。

事件类型：

1. ontouchstart：当手指放在触摸屏上时，会发生ontouchstart事件。
   句法：

   Touch me
   

   示例 1：

     
   
       DOM touchstart Event
   
     
   
       Touch me!
       
       
           function TouchFunction() {
               
               document.getElementById(
                 "p1").innerHTML = "Hello World";
           }
       
     
   
     

   输出：

   • 触摸屏幕前：
     
   • 触摸屏幕后：
     
2. ontouchmove：当用户在触摸屏上移动手指时，会发生 ontouchmove 事件。
   句法：

   Touch me
   

   示例 2：

     
   
       DOM touchmove Event
   
     
   
       Touch me!
       
       
           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;
           }
       
     
   
     

   输出：

   • 在屏幕上移动手指之前：
     
   • 在屏幕上移动手指后：
     
3. ontouchend：当用户从触摸屏上的事件中移开手指时，会发生 ontouchend 事件。
   句法：

   Touch me
   

   示例 3：

     
   
       DOM touchstart Event
   
     
   
       Touch me!
       
       
           function TouchFunction() {
               document.getElementById(
                 "p1").innerHTML = "Hello World";
           }
       
     
   
     

   输出：

   • 在将手指从屏幕上移开之前：
     
   • 从屏幕上移开手指后：
     

支持的浏览器：

• 谷歌浏览器
• 火狐浏览器
• 边缘