10-移动端开发教程-移动端事件

在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。

由于移动端默认的布局视口宽度是980像素，所以网页文字非常小，为了快速让网页还原到原来的大小，Safari最新引入了双击缩放功能：用户双击手机页面的时候，浏览器会智能的缩放当前页面到原始大小。

​双击缩放的原理就是，当用户click一次之后，浏览器会经过约300ms之后检测是否再有一次click，如果有的话，就会缩放页面。否则的话就是一个click事件。

由于双击缩放功能存在，click事件触发就会有大约200~300ms的延迟。

由于双击缩放的存在，pc端的dblclick事件也失效了。

由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸(touch)事件。

touch相关的事件跟普通的其他dom事件一样使用，可以直接用addEventListener来监听和处理。

最基本的touch事件包括4个事件：

touchstart： 当在屏幕上按下手指时触发

touchmove： 当在屏幕上移动手指时触发

touchend： 当在屏幕上抬起手指时触发

touchcancel 当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。

在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。

因为双击缩放检测的存在，在移动设备屏幕上点击操作的事件执行顺序：

touchstart(瞬间触发) → touchend → click(200-300ms延迟)

如果你使用了触摸事件，可以调用 event.preventDefault()来阻止鼠标事件被触发。

​ 当用户手指触摸到的触摸屏的时候触发。事件对象的 target 就是touch 发生位置的那个元素。

当用户在触摸屏上移动触点(手指)的时候，触发这个事件。一定是先要触发touchstart事件，再有可能触发 touchmove 事件。

​touchmove 事件的target 与最先触发的 touchstart 的 target 保持一致。touchmove事件和鼠标的mousemove事件一样都会多次重复调用，所以，事件处理时不能有太多耗时操作。不同的设备，移动同样的距离 touchmove 事件的触发频率是不同的。

注意： 即使手指移出了 原来的target 元素，则 touchmove 仍然会被一直触发，而且 target 仍然是原来的 target 元素。

​ 当用户的手指抬起的时候，会触发 touchend 事件。如何用户的手指从触屏设备的边缘移出了触屏设备，也会触发 touchend 事件。

touchend 事件的 target 也是与 touchstart 的 target 一致，即使已经移出了元素。

一次完整的touch事件的触发顺序和过程

​ 当触点由于某些原因被中断时触发。有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同):

由于某个事件取消了触摸：例如触摸过程被一个模态的弹出框打断。

触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。

当用户产生的触点个数超过了设备支持的个数，从而导致 TouchList 中最早的 Touch对象被取消

touchcancel 事件一般用于保存现场数据。比如：正在玩游戏，如果发生了 。touchcancel 事件，则应该把游戏当前状态相关的一些数据保存起来。

<code>TouchEvent</code> 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。

属性列表：

​ 一个<code>TouchList</code>代表一个触摸屏幕上所有触点的列表。

​ 举例来讲, 如果一个用户用三根手指接触屏幕(或者触控板), 与之相关的<code>TouchList</code> 对于每根手指都会生成一个 <code>Touch</code>对象, 共计 3 个.

只读属性：<code>length</code>

返回这个<code>TouchList</code>中<code>Touch</code>对的个数。(就是有几个手指接触到了屏幕)

方法：<code>item(index)</code>

返回<code>TouchList</code>中指定索引的<code>Touch</code>对象。

测试多个手机触摸屏幕：

操作：

放1个手指在div上

先放1个手指在其他地方，然后再放1个手指在<code>div</code>上

先放1个手指在其他地方，然后再逐渐放2个手指在<code>div</code>上

​ <code>Touch</code>表示用户和触摸设备之间接触时单独的交互点(<code>a single point of contact</code>)。​ 这个交互点通常是一个手指或者触摸笔，​ 触摸设备通常是触摸屏或者触摸板。

基本属性列表（都是只读）:

编号

属性名

属性说明

1.

<code>identifier</code>

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

2.

<code>screenX</code>

触摸点相对于屏幕左边缘的 <code>x</code> 坐标。

3.

<code>scre</code>enY

触摸点相对于屏幕上边缘的 <code>y</code> 坐标。

4.

<code>clientX</code>

触摸点相对于浏览器的 <code>viewport</code>左边缘的 <code>x</code> 坐标。不会包括左边的滚动距离。

5.

<code>clientY</code>

触摸点相对于浏览器的 <code>viewport</code>上边缘的 <code>y</code> 坐标。不会包括上边的滚动距离。

6.

<code>pageX</code>

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

7.

<code>pageY</code>

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

8.

<code>target</code>

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

案例：

没有左右滚动：

左右滚动：<code>pageX</code> 明显大于 <code>clientX</code>

由于点击事件经常使用，如果用click会有延迟问题，一般我们会用touch事件模拟移动端的点击事件, 以下是封装的几个事件，仅供参考。

手势相关的事件一般就是tap类（触屏）和滑动（swipe)事件两类。都是基于原生的touchstart、touchmove、touchend事件，封装成不同的手势类型自定义事件。

触碰事件，我目前还不知道它和touch的区别，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分。

tap: 手指碰一下屏幕会触发

longTap: 手指长按屏幕会触发

singleTap: 手指碰一下屏幕会触发

doubleTap: 手指双击屏幕会触发

滑动事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分。

swipe：手指在屏幕上滑动时会触发

swipeLeft：手指在屏幕上向左滑动时会触发

swipeRight：手指在屏幕上向右滑动时会触发

swipeUp：手指在屏幕上向上滑动时会触发

swipeDown：手指在屏幕上向下滑动时会触发

Zepto.js的touch模块中封装了手势相关的代码。封装了再触摸设备上触发tap– 和 swipe– 相关事件，也适用于所有的<code>touch</code>(iOS, Android)和<code>pointer</code>事件(Windows Phone)。

触屏事件：tap、singleTap、doubleTap、longTap(&gt;750ms）

滑动事件：swipe、swipeLeft,、swipeRight,、swipeUp,、swipeDown

<a href="https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2FClouda-team%2Ftouchjs" target="_blank">百度云的touch.js</a>

<a href="https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2Fhammerjs%2Fhammer.js" target="_blank">hammer.js</a>

如果某个返回按钮的位置，恰好在要返回的这个页面的带有href属性的a标签的范围内，在点击返回按钮后，页面快速切换到有a标签的页面，300ms后触发了click事件，从而触发了a标签的意外跳转，这个就是典型的点击穿透问题。罪魁祸首其实就是a标签跳转默认是click事件触发，而移动端的touch事件触发之后，依然会在300ms后触发click事件。

解决办法：

1.就是阻止触发touch事件完成后的click事件。

2.不要混用touch和click事件。显然不可能都绑定click事件，因为要解决300ms延迟问题(除了fastclick)，那么只能都绑定touch事件，这样click事件永远不会被触发。

注意：zepto并没有阻止click事件，所以使用zepto的tap事件依然会导致点击穿透问题，你需要手动添加 e.preventDefault() 来阻止click事件。

参考文章：

<a href="https://link.jianshu.com/?t=http%3A%2F%2Fblog.csdn.net%2Fu012468376%2Farticle%2Fdetails%2F72808761" target="_blank">移动端web开发---Touch事件详解</a>

<a href="https://link.jianshu.com/?t=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FTouchEvent" target="_blank">MDN:TouchEvent</a>

<a href="https://link.jianshu.com/?t=http%3A%2F%2Fwww.cnblogs.com%2Fimwtr%2Fp%2F5882166.html" target="_blank">移动端前端常见的触摸相关事件touch、tap、swipe等整理</a>