理解移动端click的300ms的延迟响应

2018-03-14

本文介绍移动端点击事件的300ms延迟及其解决方法

“Bug”的由来

Click事件在移动手机开发中有300ms的延　
因为在手机早期，浏览器系统有放大和缩放功能，用户在屏幕上点击两次之后，系统会触发放大或者缩放功能，因此系统做了一个处理，当触摸一次后，在300ms这段时间内有没有触摸第二次，如果触摸了第二次的话，说明是触发放大或缩放功能，否则的话是click事件。因此当click时候，所有用户必须等待于300ms后才会触发click事件。所以当在移动端使用click事件的时候，会感觉到有300ms的迟钝

以下情况不用考虑延迟

桌面浏览器；
如果 viewport meta 标签中设置了
width=device-width，Android 上的 Chrome 32+ 会禁用 300ms 延时；
viewport meta 标签如果设置了 user-scalable=no，Android 上的 Chrome（所有版本）都会禁用 300ms 延迟
1
<meta name="viewport" content="width=device-width, initial-scale=1">
IE10 中，可以使用 css 属性 -ms-touch-action: none 禁止元素双击缩放

解决方案

方案1：禁止用户缩放。

1	<meta name="viewport" content="width=device-width, initial-scale=1">

方案2：使用zepto.js的tap事件。

tap事件可以理解为在移动端的click事件，而zepto.js因为几乎完全复制jQuery的api，因此常常被用在h5的开发上用来取代jquery

缺陷：

tap事件解决了一个300ms延迟问题，却带来了一个新的重大bug，点击穿透

点击穿透的意思，就是如果一个绝对定位或者固定定位元素处于页面最顶层，对这个元素绑定一个点击事件，那么你点击这个点对应的下面凡是有点击事件或者a标签都会被触发执行.

方案3：fastclick.js

首先想办法引入fastclick.js
下载fastclick.js
点击获取插件源码

1	<script type='application/javascript' src='/path/to/fastclick.js'></script>

如果你使用原生js开发则进行如下声明即可。

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

如果你想使用jquery

1
2
3

$(function() {
    FastClick.attach(document.body);
});

部门内容转自移动端点击事件全攻略，这里的坑你知多少？