vue-h5：移动Web单击事件和延迟300ms的问题

在PC端的网页，大部分的交互是通过click事件来实现的，然而在移动端，则是通过touch事件来实现触摸交互。

单击或者点击事件，指的是鼠标按下并且在短时间内放开【一般是小于300ms】。

那么移动端，也是类似，在手指触摸到屏幕开始计算时间，并且在300ms内离开屏幕。这就是移动端的单击事件，手指触摸成为touch。

touch事件

移动端的touch事件，是由屏幕和触点组成。屏幕很好理解；触点是通过皮肤触碰到屏幕产生的【一般是手指】

这样touch事件可以分为：

1. touchstart：手指接触到屏幕时候触发；
2. touchmove：手指在屏幕上移动时触发；
3. touchend：手指从屏幕上离开时触发；
4. touchcancel：touch被迫取消的时候触发，比如电话或者弹出信息，或者是触点太过，超出了支持的上线就会自动取消触点。

最常用的是touchstart、touchmove和touchend。

当触发touch事件的时候，就会得到一个对象，例如：

  <script>
    document.addEventListener("touchstart", function (event) {
    
    
      console.log(event)
    })
  </script>

这个对象如下：

如上图所示，touches：表示当前页面上左右触摸点；

targetTouches：当前绑定事件的元素上的触点；

changedTouched：刚刚接触手指或者刚刚离开手指的触摸点。

每一个触点是一个对象，有以下几个常用的属性：

• offsetX/Y：相对于事件源元素，触摸点的位置；
• pageX/Y：触摸点相对于整个页面的位置；
• clientX/Y：触摸点相对于浏览器可视区的位置；

单击延迟

手机上的网页，双击是可以将页面放大，提升了用户浏览器网页的体验， 但是双击，是包含了两次单击。

一次单击，系统需要大概300毫秒的时间来判断是否第二次点击，如果有，就是完成一次双击。所以只要是点击，都要经过判断是否是双击的逻辑，导致需要等待300ms后才能收到单击事件的反馈。

处理300ms延迟的方法是设置：禁止用户进行缩放user-scalable=no。