问题背景

使用touchstart和touchend实现类似css active按下效果时发现部分安卓手机按下后就一直保持按下状态。

问题原因

在安卓上,滑动手机屏幕的触发事件过程是这样的（无 touchend）：

touchstart -> touchmove

在iphone上,滑动手机屏幕的触发事件过程是这样的：

touchstart->touchmove -> touchend

所以，在安卓上，滑动不能用 touchend 事件了（这里并不是说本身不能用touchend事件，只是滑动时无这个事件而已），经过查资料，发现之前很多人说 zepto 中的 touch.js 在微信以及安卓上用 swipe 的时候失效，其实就是因为用了这个touchend事件，故没有效果。

解决办法

解决办法也不是没有的，先说明一下在移动端的事件：

  • touchstart: 手指触摸手机屏幕的触发，即使已经有一个手指放在屏幕上也会触发。
  • touchmove: 手指在手机屏幕时滑动时连续触发，发生期间，调用 event.preventDefault() 可以阻止滚动
  • touchend: 手机触摸屏幕离开后触发
  • touchcancel: 当系统停止跟踪触摸的时候触发

  1. 如果屏幕不考虑滚动的话，可以在touchstart中添加event.preventDefault()，意思是取消了touchstart的默认事件，但是这样做就没有了滚动手机屏幕这个效果，这个适用于局部使用。

  2. 使用touchcancel事件，在js中同时绑定touchend和touchcancel事件。