移动端点击事件触发顺序_点击时间响应顺序-CSDN博客

本文链接：https://blog.csdn.net/a464064368/article/details/70598759

移动端点击事件触发顺序

移动端页面事件触发顺序和事件触发规则不同于PC端，一般都知道click在移动端会延迟200~300ms触发。
本文从实例出发，演示移动端事件的触发规则和顺序。

HTML页面：

 
         < 
         body 
         > 
        
         < 
         script 
          type 
         = 
         "text/javascript" 
         > 
        
         var firstEmitTime = 0; 
        
         //页面输出日志 
        
         function showLog(msg){ 
        
         var p = document.createElement('p'); 
        
         p.innerHTML = msg; 
        
         document.body.appendChild(p); 
        
         } 
        
         </ 
         script 
         > 
        
         < 
         a 
          href="javascript: 
        
         var  
         aa 
         = 
         'href: ' 
          + ((new Date()).getTime() - firstEmitTime); 
        
         showLog(aa);console.log(aa);" 
        
         id 
         = 
         "aa" 
         >This is a href</ 
         a 
         > 
        
         < 
         script 
          type 
         = 
         "text/javascript" 
          src 
         = 
         "tmp.js" 
         ></ 
         script 
         > 
        
         </ 
         body 
         >

tmp.js文件：

 
         var 
          aa = document.getElementById( 
         "aa" 
         ); 
        
         var 
          eventTypeArr = [ 
         'click' 
         ,  
         'touchstart' 
         ,  
         'touchmove' 
         ,  
         'touchend' 
         ,  
        
         'mousedown' 
         ,  
         'mousemove' 
         ,  
         'mouseover' 
         ,  
         'mouseup' 
         ]; 
        
         for 
         ( 
         var 
          i = 0; i < eventTypeArr.length; i++){ 
        
         //利用闭包保存eventType，当回调函数触发时会访问该闭包的环境变量对象 
        
         ( 
         function 
         (){ 
        
         var 
          eventType = eventTypeArr[i]; 
        
         aa.addEventListener(eventType,  
         function 
         (){ 
        
         var 
          curTime = ( 
         new 
          Date()).getTime(); 
        
         if 
         (firstEmitTime === 0){ 
        
         firstEmitTime = curTime; 
        
         } 
        
         //打印当前事件触发时间与第一个事件触发时间的差值 
        
         var 
          log = eventType +  
         ': ' 
          + (curTime - firstEmitTime); 
        
         console.log(log); 
        
         showLog(log); 
        
         }); 
        
         })(); 
        
         }

在iPhone4/iOS7.0.4上如果点击（非长按），则输出结果大多为（事件触发顺序不变，间隔时间略有不同）：
touchstart:0
touchend:204
mouseover:243
mousemove:243
如果长按链接，经一百多次测试，下面是两种输出结果，约70%是第一种情况（由于受点击时长和力度的影响，此数据仅供参考）：
第一种：
touchstart:0
mouseover:2238
mousedown:2239
mouseup:2243
click:2244
href:2245

第二种：
mouseover:0
mousedown:0
mouseup:5
click:5
href:5
其中，href内为JavaScript代码时，浏览器会提示是否打开，需要点击打开，才会输出mouseover及其后面的值，因此与touchstart的间隔可能不是200~300ms。
从结果可以看出该环境下：
1、与click触发时，touchstart未必触发；
2、mouse系列事件与click事件是相近时间内触发，大约在touchstart后延迟200~300ms后触发。

在华为MT1-U06/Android4.1.2上点击链接（非长按），测试一百多次，主要有下面三种结果，出现概率分别为70%、25%和5%（由于受点击时长和力度的影响，此数据仅供参考）：
第一种：
mouseover:0
mousemove:6
touchstart:12
touchend:568
mousedown:869
mouseup:874
click:876
href:879

第二种：
mouseover:0
mousemove:7
mousedown:387
mouseup:392
click:394
href:396

第三种：
mouseover:0
mousemove:8
touchstart:12
touchmove:91
touchend:95
可以看出该环境下：
1、mouse事件会先于touch事件开始，而迟于其结束。
2、click和href事件触发仍是最后触发，会延迟300ms左右。