目录
1、click延时原因
移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。
2、解决方案
2.1、方案一：禁用缩放
浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟。
<meta name="viewport" content="user-scalable=no" />
2.2、方案二：利用 touch 事件自己封装这个事件解决 300ms 延迟。
原理就是：
- 当我们手指触摸屏幕，记录当前触摸时间；
- 当我们手指离开屏幕，用离开的时间减去触摸的时间；
- 如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击；
//封装tap，解决click 300ms 延时
function tap(obj, callback) {
var isMove = false;
var startTime = 0; // 记录触摸时候的时间变量
obj.addEventListener("touchstart", function (e) {
startTime = Date.now(); // 记录触摸时间
});
obj.addEventListener("touchmove", function (e) {
isMove = true; // 看看是否有滑动，有滑动算拖拽，不算点击
});
obj.addEventListener("touchend", function (e) {
if (!isMove && Date.now() - startTime < 150) {
// 如果手指触摸和离开时间小于150ms 算点击
callback && callback(); // 执行回调函数
}
isMove = false; // 取反 重置
startTime = 0;
});
}
//调用
tap(div, function () {
// 执行代码
});
2.3、方案三：利用插件 fastclick
fastclick 插件解决300ms 延迟。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="fastclick.js"></script>
</head>
<body>
<div></div>
<script>
if ("addEventListener" in document) {
document.addEventListener(
"DOMContentLoaded",
function () {
FastClick.attach(document.body);
},
false
);
}
var div = document.querySelector("div");
div.addEventListener("click", function () {
alert(11);
});
</script>
</body>
</html>
后记
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！
