300ms延迟问题

在移动端中点击事件会存在300ms延迟，造成这个事件的原因是：

  • 移动端存在双击放大缩小的情况，设备无法确定用户是单击还是双击，需要等待300ms来界定用户行为。

解决方式：

  • 通过meta标签来禁止网页缩放，置usr-scalabel=no

  • fastclick.js 这里只需要知道有这种解决办法就行

    touch事件和穿透问题

    事件

  • touchstart ： 触摸

  • touchmove ： 手指滑动
  • touchend ： 手指离开屏幕 (点击离开，滑动离开都会触发)

touch事件穿透问题：

下面这段代码当点击a标签区域的时候，本质上只是点击了处于上层的mask，但是因为touch事件存在穿透问题，会跳转到a标签的链接当中。

  1.  <style>
  2.       .mask {
  3.         position: absolute;
  4.         width: 100vw;
  5.         height: 100vh;
  6.         background-color: rgba(0, 0, 0, 0.3);
  7.       }
  8.     </style>
  9.   </head>
  10.   <body>
  11.     <div class="mask"></div>
  12.     <a href="https://www.baidu.com">baidu</a>
  13.     <script>
  14.       const mask = document.querySelector('.mask');
  15.       mask.addEventListener('touchstart', () => {
  16.         console.log('start');
  17.         mask.style.display = 'none';
  18.       });
  19.     </script>
  20.   </body>

解决方式

  • fastclick
  • 阻止默认行为