2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > js 移动端 为什么用tap而不是click 移动端click延时解决方案

js 移动端 为什么用tap而不是click 移动端click延时解决方案

时间:2023-11-09 19:47:10

相关推荐

js 移动端 为什么用tap而不是click  移动端click延时解决方案

原因

移动端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(){})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。