原因
移动端click有300ms延时 ,原因是等到第二次点击,实现屏幕双击缩放功能。
解决方案
禁止缩放
禁止缩放,浏览器禁用默认的双击缩放行为并且去掉300ms的延时
<meta name="viewport" content="user-scalable=no">
利用touch事件自己封装 这个事件解决延迟
原理:
当我们手指触摸屏幕,记录单前触摸时间当我们手指离开屏幕,用离开的时间减去触摸时间 小于150ms且没有滑动屏幕,就定义为点击
封装tap 只能一个一个的解决
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){callback && callback()}isMove = falsestartTime = 0})}tap(ele,function(){console.log("点击了")})
使用插件 fastclick插件解决300ms延迟
github : /ftlabs/fastclick
直接使用 tap事件
ele.addEventListener('tap',function(){})