移动端Touch （触摸）事件

一：常见的触摸事件：touchstart、touchmove和touchend。

      touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

      touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用                                               preventDefault()事件可以阻止滚动。

      touchend事件：当手指从屏幕上离开的时候触发。

二：触摸事件还包含下面三个用于跟踪触摸的属性。

      touches：表示当前跟踪的触摸操作的touch对象的数组。

      targetTouches：特定于事件目标的Touch对象的数组。

                           （正在触摸当前 DOM 元素上的手指的一个列表。）

      changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

三：每个Touch对象包含的属性：

    

 1.Touch.identifier：此 Touch 对象的唯一标识符。 一次触摸动作(我们指的是手指的触摸)在平  面上移动的整个过程中，该标识符不变。 可以根据它来判断跟踪的是否是同一次触摸过程，此值为只读属性。

2.Touch.screenX：触点相对于屏幕左边沿的X坐标。只读属性。

3.Touch.screenY：触点相对于屏幕上边沿的Y坐标。只读属性

4.Touch.clientX：触点相对于可见视区(visual viewport)左边沿的X坐标。不包括任何滚动偏移。只读属性。

5.Touch.clientY：触点相对于可见视区(visual viewport)上边沿的Y坐标。不包括任何滚动偏移。只读属性。

6.Touch.pageX：触点相对于HTML文档左边沿的X坐标。当存在水平滚动的偏移时，这个值包含了水平滚动的偏移。只读属性。

7.Touch.pageY：触点相对于HTML文档上边沿的Y坐标。当存在水平滚动的偏移时，这个值包含了垂直滚动的偏移。只读属性。 

8.Touch.radiusX：能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径。这个值的单位和 screenX 相同。只读属性。

9.Touch.radiusY：能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径。这个值的单位和 screenY 相同。只读属性。

10.Touch.rotationAngle：它是这样一个角度值：由radiusX 和 radiusY描述的正方向的椭圆，需要通过顺时针旋转这个角度值，才能最精确地覆盖住用户和触摸平面的接触面。只读属性。

11.Touch.force：手指挤压触摸平面的压力大小，从0.0(没有压力)到1.0(最大压力)的浮点数。只读属性。

12.Touch.target：当这个触点最开始被跟踪时(在 touchstart 事件中)，触点位于的HTML元素。哪怕在触点移动过程中，触点的位置已经离开了这个元素的有效交互区域，或者这个元素已经被从文档中移除。需要注意的是，如果这个元素在触摸过程中被移除，这个事件仍然会指向它，但是不会再冒泡这个事件到 window 或 document 对象。因此，如果有元素在触摸过程中可能被移除，最佳实践是将触摸事件的监听器绑定到这个元素本身，防止元素被移除后，无法再从它的上一级元素上侦测到从该元素冒泡的事件。只读属性。

四：获取触摸点

 五：点击穿透

一、事件触发顺序

　　PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。一次点击行为，可被拆解成：mousedown -> mouseup -> click 三步。

　　手机上没有鼠标，所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend，注意手机上并没有tap事件。手指触发触摸事件的过程为：touchstart -> touchmove -> touchend。

　　手机上没有鼠标，但不代表手机不能响应mouse事件（其实是借助touch去触发mouse事件）。也就是说在移动端的click事件可以拆解为：touchstart -> touchmove -> touchend -> click。

　　浏览器在 touchend 之后会等待约 300ms ，如果没有 tap 行为，则触发 click 事件。 而浏览器等待约 300ms 的原因是，判断用户是否是双击（double tap）行为，双击过程中就不适合触发 click 事件了。 由此可以看出 click 事件触发代表一轮触摸事件的结束。

 二.什么是点击穿透？

        有俩个元素B和A，B在A的上面，我们给B设置touchStart事件，如果在B事件使B隐藏掉，

    接着会去触发A的click事件，主要是 click事件不是立马执行，而是有300ms的延迟

                        混用click和touch会导致穿透事件。

  即：在这 300ms 以内，因为上层元素隐藏或消失了，由于 click 事件的滞后性，同样位置的 DOM 元素触发了 click 事件

2.解决方案：

   方案1：给a同样绑定了touchstart事件，不用click事件

   方案2：使用第三方插件 tap.js

         原理：在touchend和click之间添加一个自定义事件 tap,

                   在tap事件中暂时不要监听click事件设置定时器

                   click的滞后时间（300ms）,再把click事件加上

   方案3：禁止页面缩放   

   <meta name="viewport" content="width=device-width, user-scalable=no">

方案4：取消点击穿透的延迟：
  IE 10可以用 CSS 取消点击穿透的延迟：
    html {
          -ms-touch-action: manipulation;
          touch-action: manipulation;
         }

IE 11+ 可以用 touch-action: manipulation; 属性来阻止元素的双击缩放。