移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放(double tap to zoom) 页面。
解决方案:
- 禁用缩放。浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟
<meta name="viewport" content="user-scalable=no">
- 利用 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(){ // 执行代码 });
以上两种方案或不符合实际需求或显得麻烦,下面是第三种方案:
- 使用插件。 fastclick 插件解决 300ms 延迟 JS 插件是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件。 特点:它一般是为了解决某个问题而专门存在,其功能单一,并且比较小。
fastclick 插件的 GitHub 官方地址:http:// https://github.com/ftlabs/fastclick
插件使用方法:
① 引入 js 插件文件
② 按照规定的语法使用
将下列代码复制到<script> ... </script> 里面去
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}