[TOC] # 2.2 click延时解决方案 移动端click事件会有300ms的延时,原因是移动端屏幕双击会缩放(double tap to zoom)页面。 解决方案: ## 1.禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。 ~~~ <meta name="viewport" content="user-scalable=no"> ~~~ ## 2.利用touch事件自己封装这个事件解决300ms延迟。 原理就是: 1.当我们手指触摸屏幕,记录当前触摸时间 2.当我们手指离开屏幕,用离开的时间减去触摸的时间 3.如果时间小于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(); /1执行回调函数 isMove = false; // 取反 重置 startTime = 0; }) ; //调用 tap(div, function(){ // 执行代码 }) ; ~~~ 解决方案: ## 3.使用插件。fastclick 插件解决300ms延迟。 fastclick插件解决300ms延迟。使用延时 GitHub官网地址:[https://github.com/ftlabs/fastclick](https://github.com/ftlabs/fastclick)