移动web开发技能之touch事件详解

概述

单击事件是任何一个前端页面中最常用的交互行为之一，在传统的PC端大部分是使用click事件来实现用户单击交互的程序逻辑，而在移动Web端新增了touch事件来实现移动端更加敏感和复杂的触摸交互行为。本章将就移动端touch事件的使用以及它与PC端的click事件的区别进行深入探讨。

touch事件

在传统的PC端，用户的单击操作主要是由鼠标的左键或者右键来产生，它主要是指鼠标的按钮被按下，并且在很短的时间内（一般小于300ms）又被释放开，这就被称为单击操作（或称为一次点击操作）。

而对于移动Web端，同样也是如此，当手指触摸到屏幕时开始计算时间，并且在300ms内离开屏幕，这段时间手指不能移动，这就算是移动Web端的单击事件，手指触摸就被称为touch。

touch事件分类

移动Web端的touch触摸事件主要由屏幕和触摸点组成，其中屏幕可以是手机、平板或者触摸板，而触摸点可以通过手指、胳膊肘或触摸笔，甚至耳朵、鼻子都行，但一般是通过手指。根据touch触摸的类型可分为以下4种事件：

touchstart：当手指与屏幕接触时触发。
touchmove：当手指在屏幕上滑动时连续地触发。
touchend：当手指从屏幕上离开时触发。
touchcancel：当touch事件被迫终止，例如电话接入或者弹出信息时会触发，或者当触摸点太多，超过了支持的上限（自动取消早先的触摸点）时触发，一般不常用。

相比PC端，以上4种事件将用户的touch行为划分得更细，并且通过这些细化的事件可以实现移动Web端独有的用户交互行为，例如拖动swipe、长按longtap、双指缩放pinch，等等。

其中的touchstart、touchmove和touchend是最常用的3个事件，其中touchstart最先触发，touchend结束时触发，而touchmove是否触发取决于手指是否在触摸屏上移动。下面用代码来感受一下这3种事件的触发顺序，如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>touch事件</title>
  <script type="text/javascript">
    document.addEventListener("touchstart",function () {
        console.log("开始触摸");
    });
    document.addEventListener("touchmove",function () {
        console.log("移动手指");
    });
    document.addEventListener("touchend",function () {
        console.log("结束触摸")
    });
  </script>
</head>
<body>
</body>
</html>

在浏览器中运行这段代码，同时注意要启用Chrome中DevTools工具中的Device Mode功能，并使用鼠标模拟手指在屏幕上触发触摸事件，随后就会在Console控制台看到打印出对应的日志，从中可以看到一个简单的触摸操作是如何完成的。

touch事件对象

对于touch事件，每一次触发都可以得到一个事件对象，在JavaScript中这个对象叫作TouchEvent，利用TouchEvent可以获取touch事件触发时的坐标、元素以及到底有几个手指触发等，下面就来了解一下TouchEvent事件对象。

可以在Console控制台打印出当前触发touch时的TouchEvent对象，代码如下所示：

document.addEventListener("touchstart",function (e) {
    console.log(e);
});

打印的内容如图:

在上面的TouchEvent的属性中，经常使用的就是touches、targetTouches和changedTouches，它们的含义分别是：

touches：当前页面（屏幕）上所有的触摸点。
targetTouches：当前绑定事件的元素上的触摸点。
changedTouches：当前屏幕上刚刚接触的手指或者离开的手指的触摸点。

这3个属性返回的是TouchList对象，代表的是一个touch的集合数组，也就是说每一次touch触发，都会兼顾到多指触摸的场景，下面就分别以单指触摸的场景和多指触摸的场景来讲解这3个属性的区别。

首先是单指触摸的场景，我们来模拟用户一个手指触摸，如图。

外层的线框代表页面，里面的一个<div>元素绑定了touch事件，1号手指触摸了该<div>元素，这时touches、targetTouches以及changedTouches里面的触摸点都是指1号手指这个触摸点，应该很好理解。对于多指触摸的场景，条件是手指触摸屏幕之后暂不离开，如图。

外层的线框代表页面，里面的一个<div>元素绑定了touch事件，首先1号手指第一个触摸了该<div>元素，然后2号手指第二个也触摸了该<div>元素，最后3号手指第三个触摸了div外面的区域，这时touches涵盖的触摸点的集合数组包括1号、2号、3号手指，而targetTouches涵盖的触摸点的集合数组包括1号和2号手指，而changedTouches涵盖的触摸点的集合数组包括2号和3号手指。

当手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，此值为最后一个离开屏幕的手指的接触点。这就是touches、targetTouches和changedTouches这3个属性对于单指触摸的场景和多指触摸的场景下的区别，总结如下：

单指触摸的场景：

touches：1号手指
targetTouches：1号手指
changedTouches：1号手指

多指触摸的场景：

touches：1，2，3号手指
targetTouches：1，2号手指
changedTouches：2，3号手指

对于单指触摸的场景来说，它们并无区别，主要区别在于多指触摸的场景，所以在使用时可以根据具体的程序逻辑来选择使用合适的属性。

对于涵盖触摸点的集合数组TouchList而言，里面每个元素都是一个touch对象，通过这个对象可以获取当前触摸的位置，如图。

其中，主要用到了offsetX/Y、pageX/Y和clientX/Y这3个属性，它们的区别和含义分别是：

offsetX/Y：触摸位置相当于事件源元素的位置坐标，以当前<div>元素盒子模型的内容区域的左上角为原点。
pageX/Y：触摸位置相当于整个页面内容区域的位置坐标，当页面过长时，包括滚动隐藏的部分内容，以页面完整内容区域的左上角为原点。
clientX/Y：触摸位置相当于浏览器视区（屏幕）区域的位置坐标，以相对于页面的可见部分内容区域的左上角为原点。

具体的位置和距离可以参考下图，外层表示页面的所有内容，中间框表示浏览器的视区，其中有一个<div>元素绑定了touch事件，黑点表示触摸点的位置。

移动web单击事件

在了解了touch事件之后，我们知道移动Web端的单击事件完全可以由touchstart、touchmove和touchend来组合实现，移动Web端同时也提供了原生的click事件，它和传统的PC端的click事件一样，在用户完成一次完整的手指单击屏幕之后触发。在移动Web端使用click绑定单击事件，代码如下：

document.addEventListener("click",function (e) {
    console.log(e);
});

一切看似都很顺利，在需要使用单击时就用click事件，在需要使用touch时（拖动，长按等）就使用touch对应的事件。但是，对于移动Web端而言，处于iOS系统或Android系统时，采用click实现单击事件却有着不同的表现。

iOS单击延迟

这要追溯至2007年初，苹果公司在发布首款iPhone前遇到了一个问题：当时的网站都是为大屏幕设备所设计的，于是提出了视区（Viewport）的概念，其中一项即是用户在浏览网页时，可以在页面的任何地方通过双击操作将页面放大（Double Tap to Zoom）。这个交互功能提升了用户浏览网页时的体验，于是Android和iOS的移动端浏览器纷纷支持了这个功能，但是对于双击这个操作而言，其实是包括了两次单击操作，当第一次单击完成后，系统需要有一段时间来监听是否有第二次单击，如果有则表明此次操作是一个双击操作，而这段时间间隔大概有300毫秒（ms）。

因此，哪怕是只想要单击这个事件，也都会经过双击放大这个判断逻辑，导致要等到300毫秒之后才能收到单击事件程序逻辑的反馈，这就是300毫秒的单击延迟问题。

对于Android系统的浏览器而言，可以通过给视区设置user-scalable=no来禁止用户进行缩放，随后就可以正常地使用原生的click事件而没有延迟；对于iOS系统而言，浏览器对user-scalable支持度存在Bug（漏洞），导致了无法通过简单的设置来达到正常使用原生click事件的目的。代码如下：

<meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

所以，在iOS移动端，如果想要实现真正的单击事件而没有300毫秒延迟问题，就不能采用原生的click事件，可以通过touch（touchstart、touchmove和touchend）事件来模拟一次单击操作。好在当前业界已有比较流行的方案，例如Zepto.js中的tap事件和FastClick.js库可用来解决这个问题，在这里主要介绍一下FastClick.js库。

FastClick.js是FT Labs团队结合touch事件专门为解决移动端浏览器的300毫秒单击延迟问题所开发的一个轻量级的库。正常情况下，在移动Web端，当用户单击屏幕时，会依次触发touchstart、touchmove（0 次或多次）、touchend、click（原生）这些事件。touchmove事件只有当手指在屏幕上移动时才会触发。Touchstart、touchmove或者touchend 事件的任意一个调用event.preventDefault()方法，都会直接阻止原生click事件的触发。

FastClick的实现原理是在检测到touchend事件触发时，把浏览器在300毫秒之后原生的click事件阻止掉，然后通过DOM自定义事件立即发出一个模拟的click事件，这样就消除了300毫秒的延迟，提供了一个快速响应的“单击”事件。如下代码演示了FastClick的使用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>FastClick.js</title>
  <script type="text/javascript" src="./fastclick.js"></script>
</head>
<body>
  <button id="click">点我</button>
  <script type="text/javascript">
    // 页面加载完成后，使用FastClick，一般传递最外层的body元素即可
    document.addEventListener('DOMContentLoaded', function(){
        FastClick.attach(document.body);// 在实际的项目中，需判断在iOS移动端才需要此程序逻辑
    }, false);
    document.getElementById("click").addEventListener("click",function(){
        alert("单击触发！ ");
    },false)
  </script>
</body>
</html>

需要注意的是，在不修改<meta>标签中的user-scalable属性的情况下，300毫秒单击延迟的问题只会出现在iOS系统的浏览器中，并且解决方案只需要针对iOS端，上文也提到了这个问题的产生是由于对user-scalable支持度存在Bug，之后苹果公司也意识到了这个问题的严重性，于是在iOS 9.3版本时，提供了一个基于新的内核WKWebView的浏览器，并将其应用在Safari浏览器上，由此解决了这个问题（存在300毫秒单击延迟问题的浏览器是UIWebView，这个内核已经不再维护了），并且后续使用iOS 9.3版本系统的浏览器在访问页面时，会默认使用WKWebView浏览器。

至此，移动Web端的300毫秒单击延迟问题得到了彻底的改善。

“单击穿透”问题

在移动Web端，有一个很常见的应用场景，单击一个按钮会出现一个蒙层，此蒙层是全屏遮盖，并且有最高层级，当单击蒙层时，蒙层消失。此场景和交互操作看似并没有什么问题，但是假如页面中有一个绑定了单击事件的<div>元素被蒙层遮盖，而单击蒙层关闭时的位置刚好和该<div>元素重合，那么蒙层关闭后会同时触发该<div>元素的单击事件，对于用户来说，这个操作并不是要单击该<div>元素，这就是所谓的“单击穿透”问题，如图。

出现“单击穿透”问题需要有个条件，即蒙层是通过绑定的touch事件来实现隐藏，而其遮盖的<div>元素绑定的是原生click事件，这样就形成了touch事件触发之后，蒙层隐藏了，300毫秒后当前这个触摸点的click事件又触发了，就形成“单击穿透”。

移动Web端的“单击穿透”问题出现的原因其实和300毫秒单击延迟问题脱不了关系，但是“单击穿透”出现的场景比较单一，并且也比较好解决。

解决“单击穿透”问题可以从问题出现的原因上来着手，主要有以下两种解决方案：

不要同时混用touch事件和click事件，要么给蒙层和<div>元素同时绑定touch事件，要么同时绑定click事件，在iOS 9.3版本之后，只用click事件即可，此方案体验最好。
延迟蒙层消失的时间，例如在touch事件触发后，在350毫秒后再让蒙层消失，这样后面的<div>元素就不会触发click事件了，此方案会导致蒙层消失的响应慢，体验差，并且有时会触发两次消失逻辑，故不推荐使用。

无论是300毫秒单击延迟问题，还是“单击穿透”问题，这些都是移动Web端特有的问题，也在一定程度上反映出移动Web端环境的复杂性，需要注意支持度和兼容性问题的地方很多，所以大家在进行移动Web端开发时，要有意识地去关注这些问题。