[js] 第73天 移动端点击事件为什么会有延迟?有哪些方法可以解决?
haizhilin2013 opened this issue · comments
第73天 移动端点击事件为什么会有延迟?有哪些方法可以解决?
原因:等待300ms看用户是点击还是双击缩放
解决办法:禁止缩放、设置默认视口宽度为设备宽度、设置css touch-action:none、fastclick.js
现在你只要设置了, viewpoint, 手机浏览器就会默认禁止300ms延迟了
移动端click事件会有300ms的延迟用来确定用户是不是双击的操作,这样的延迟效果也造成了移动端有点透的问题
视口延迟判断,300ms之内会不会有下一次点击操作,如果有就是放大缩小,没有就是点击事件
fastclick主要的原理就是,创建了一个div,并且执行了这个div的点击事件并且取消默认事件,再隐藏这个div
原因:等待300ms看用户是点击还是双击缩放
解决办法:禁止缩放、设置默认视口宽度为设备宽度、设置css touch-action:none、fastclick.js
为了兼容移动端的双击事件,300ms连续两次就是双击,否则就是单击。
解决方法: 1 禁止缩放 2 fastclick.js, 原理是在检测到touchend事件的时候,会经过 DOM 自定义事件当即触发一个模拟click事件,并把浏览器在 300 毫秒以后真正触发的click事件阻止掉。