Web移动端-touch事件

一、引入

在一个项目demo中，实现单指触控卡片的向任意方向的拖动效果。网上没有现成的插件，所以只好原生js来写。产品要求需要禁止掉多点触控。这个过程很让人头疼，试了很多方法，都不太实现。后来仔细研究，测试了一下移动端的三个常用事件。

二、事件

移动端的触摸事件常用的有一下三种：

touchstart:当有新手指触控到绑定的元素，会触发一次事件。

touchmove:当有手指放绑定的元素上会一直触发，从触发条件准确的说只有手指移动时才触发。但是经过测试，这一项检测十分灵敏，人为手指保持不动，系统也会侦测到细小的移动。所以会一直触发。

touchend:当有手指从绑定元素上抬起，会触发一次。

代码：

change.addEventListener('touchstart',function(e){
    if (e.touches.length != 1) {
    	//执行的代码A
    }else{
        //执行的代码B
    }
}, { passive: false });

ps：添加事件的第三个参数，参考我的另一篇博客：https://blog.csdn.net/konghouy/article/details/83047376

我们在这里主要关注回调函数传入的参数e，这个参数是浏览器侦测到事件的触发，将触发那一刻的一些触发的信息记录了下来。e里面比较重要的有三个属性：

changedTouches：保存了所有引发事件的手指信息

targetTouches：保存了当前对象上所有触摸点的列表;

touches：保存了当前所有触碰屏幕的手指信息

数组元素的属性：

• identifier:表示每 1 个 Touch 对象 的独一无二的 identifier。有了这个 identifier 可以确保你总能追踪到这个 Touch对象。

• clientX:触摸点相对于览器的 viewport左边缘的 x 坐标。不会包括左边的滚动距离。

• clientY:触摸点相对于浏览器的 viewport上边缘的 y 坐标。不会包括上边的滚动距离。

• pageX:触摸点相对于 document的左边缘的 x 坐标。 与 clientX 不同的是，他包括左边滚动的距离，如果有的话。

• pageY:触摸点相对于 document的左边缘的 y 坐标。 与 clientY 不同的是，他包括上边滚动的距离，如果有的话。

• target:总是表示 手指最开始放在触摸设备上的触发点所在位置的 element。 即使已经移出了元素甚至移出了document, 他表示的element仍然不变

需要注意的是

• 在多指触控的时候，这里的三个属性都是数组。数组中保存着对应的手指位置信息。数组的顺序是是根据手指放上去的顺序，先放上去的在数组的前面。
• changedTouches：记录了当前事件是由几根手指触发的，但是由于手机触控十分灵敏，所以当一根手指放在元素上不动，另外一根手指移动。这时changeDTouches的值，一直在1,2闪动。（也就是说，不动的那根手指也可能会触发事件）建议在开发中，不要使用changedTouches作为判断依据。
• 在实际测试中，如果在手指按下后不抬起，移出了事件触发的源对象，仍然会触发回调函数。

三、应用

通过对touch事件的判断，即可增加对touch触发条件的控制。可以识别多指触控，让浏览器实现不同的效果。

四、调试问题

在PC浏览器上chrome控制台，可以启动手机模拟，用鼠标模拟触摸，但是无法实现多点触控模拟。而且相比真实触摸会因为微小的移动，导致连续touchmove，高精度的鼠标不移动就不触发touchmove。模拟真实度低。

当然也有解决方案，第一种使用支持多点触控的电脑直接模拟输入。或是用手机测试，将打印结果通过innerHTML写入页面中进行调试。

最终的解决方案就是使用Chrome控制台的Remote devices链接Android手机进行调试。这种方式通过数据线，把手机版chrome的操作对应的到电脑端的控制台打印。