问题描述
移动端由于屏幕双击会缩放页面，因此移动端click事件会有300ms延时情况的产生
解决方案
方法一：全局禁止缩放
- 在html页面头部的meta标签中加上content="user-scalable=no"
<meta content="user-scalable=no">
- 该方法会让浏览器禁用默认的双击行为并且去掉300ms点击延时
- 适用场景：需要对整个页面进行禁用双击行为。但是一般不常用。
方法二：封装tap函数解决300ms延迟
- 原理
- 当手指触摸屏幕，记录当前触摸时间
- 当手指离开屏幕，用离开时间减去触摸时间
- 如果时间小于150ms，并且没有滑动过屏幕，那么将这行为近似作为点击事件来处理，并完成相应的点击处理函数
- 实现代码
/**
* 封装tap 解决移动端click事件300ms延时问题
* @param obj 监听对象
* @param callback 执行的函数
*/
function tap(obj,callback) {
// 判断是否滑动的标志位
var isMove = false;
// 记录触摸开始时间
var startTime = 0;
// 开始触摸 记录开始触摸时间
obj.addEventListener('touchstart',function (e) {
startTime = Date.now();
})
// 开始滑动 改变滑动标志位 有滑动 算拖拽 不算点击
obj.addEventListener('touchmove',function () {
isMove = true;
})
// 手指离开屏幕
obj.addEventListener('touchend',function () {
// 如果为滑动事件 则直接掠过 如果不是滑动事件且 时间小于150ms则认为是点击操作 将执行点击业务逻辑，也即回调函数callback()
if (isMove && (Date.now() - startTime < 150)) {
// 如果有回调函数 则执行回调函数中的业务逻辑
callback && callback();
}
// 重置标志位
isMove = false;
startTime = 0;
})
}
// 调用
tap(div,function () {
// 执行业务逻辑
})
- 使用弊端：每个元素都需要调用该函数，如果存在上百个页面元素，则需要调用一百次该事件，非常不方便
方法三：fastclick插件
- 作用：解决移动端click事件300ms延时问题
- 使用好处：一个代码便解决所有页面元素click300ms延时问题，之后便可以正常写元素click事件
- github官网地址点击此处.
- 用法
- 下载fastclick.js文件
- 引入fastclick.js文件
- 使用
// 消除所有元素click延时 if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } // 当使用click事件时 不会再有300ms延时 div.addEventListener('click',function () { // 业务处理 })
