手机端click事件300ms延迟问题&&zepto.js的点透事件

朱雀 2020-09-12 01:54 611阅读 0赞

手机端click事件300ms延迟问题

问题由来：双击事件

假定这么一个场景。用户在iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。于是就出现了300ms的延迟事件。

目前的解决方法：

1.禁止缩放

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

在 Chrome 32 这一版中，他们将在包含 width=device-width 或者置为比 viewport 值更小的页面上禁用双击缩放。当然，没有双击缩放就没有 300 毫秒点击延迟。

此方法只有在特定场景（禁止缩放）下才可行。

2.指针事件 (Pointer Events)

指针事件最初由微软提出，现已进入 W3C 规范的候选推荐标准阶段 (Candidate Recommendation)。这个草案规范旨在使用一个单独的事件模型，对所有输入类型，包括鼠标 (mouse)、触摸 (touch)、触控 (stylus) 等，进行统一的处理。

用css设置-ms-touch-action: none，那么对应的元素在被点击之后，浏览器不会启动缩放操作，也就避免了这个300ms延迟，但目前只有IE10+支持，目前touch开发的重点在safari和chrome。

此方案目前兼容性不好，不过chrome表示会在未来版本中支持的。

3.指针事件 (使非IE也支持)

Google的Polymer

微软的 HandJS

@Rich-Harris的 Points

4.fastclick.js

FastClick的使用方法非常简单，在 window load 事件之后，在body上调用FastClick.attach()即可。

window.addEventListener(function()\{

FastClick.attach( document.body );

\},false );

当 FastClick 检测到当前页面使用meta设置了user-scalable=no或者 touch-action 属性的解决方案时，会静默退出。可以说，这是真正的跨平台方案出来之前一种很好的变通方案。

5.jQuery和zepto.js都支持tap事件取代click事件

但是tap事件可能会出现“点透”事件

问题由来：

zepto的tap通过监听绑定在document上的touch事件来完成tap事件的模拟的，及tap事件是冒泡到document上触发的。在点击完成时的tap事件(touchstart\\touchend)需要冒泡到document上才会触发，而在冒泡到document之前，用户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计)，所以在执行完tap事件之后，弹出来的选择组件马上就隐藏了，此时click事件还在延迟的300ms之中，当300ms到来的时候，click到的其实不是完成而是隐藏之后的下方的元素，如果正下方的元素绑定的有click事件此时便会触发，如果没有绑定click事件的话就当没click，但是正下方的是input输入框(或者select选择框或者单选复选框)，点击默认聚焦而弹出输入键盘，也就出现了上面的点透现象。

目前解决方法：

1.fastclick.js（同时解决click事件300ms延迟问题）

2.用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()

$("\#cbFinish").on("touchend",function (event) \{

//很多处理比如隐藏什么的

event.preventDefault();

\});

3.延迟一定的时间(300ms+)来处理事件

$("\#cbFinish").on("tap",function (event) \{

setTimeout(function()\{

//很多处理比如隐藏什么的

\},320);