众所周知 移动设备上web界面,click事件有300s的延迟,是因为。。。。。(很多巴拉巴拉)
影响延迟主要是因为,事件响应的顺序是
- ontouchstart 当手指触摸手机屏幕时发生
- ontouchmove 当手指在屏幕上滑动时连续触发,通常我们在滑屏界面,会调用ever.preventDefault组织默认情况,防止页面滑动
- ontouched 当手指离开屏幕时触发
- click 点击事件
所以如何解决移动端web界面事件延迟以及点击穿透方案?
浏览器的开发商的解决方案
方案一: 禁止缩放
<meta name="viewport" content="user-scalable=no"/>
<meta name="viewport" content="initial-scale=1,maximum-scale=1"/>
方案二:更改默认的可视宽度
<meta name="viewport" content="width=device-width"/>
** 第三方的解决方案**
FastClick
githup:https://github.com/ftlabs/fastclick/
用法:
- 头部引入
-
<script type="application/javascript">
window.addEventListener('load', function () {
FastClick.attach(document.body);
}, false);
</script>
结束语:当然不止这些解决办法,但足够自己用了。待完善~~~
网友评论