1.产生的原因
在移动端触发时间会按照 touchstart,touchmove,touchend,click 顺序触发;触发touchend,click之间会有200-400不等的时间延时(因为移动端需要判断用户是不是想要进行双击)
2.解决方法
1.禁用缩放
缺点:就是必须通过完全禁用缩放来达到去掉点击延迟的目的,然而完全禁用缩放并不是我们的初衷,我们 只是想禁掉默认的双击缩放行为,这样就不用等待300ms来判断当前操作是否是双击。但是通常情况下,我们 还是希望页面能通过双指缩放来进行缩放操作,比如放大一张图片,放大一段很小的文字。
2.改变视口宽度
更改默认的视口宽度,这下除了safari浏览器还有300ms以外,其他的浏览器都已经没有延迟了.貌似是因为这个 方案还没有被safari通过.因为我们已经为用户适配了页面大小和阻止了用户缩放,所以浏览器就不用再判断用 户双击缩放了,于是便自动取消了click事件的300ms延迟
3. touch-action
html {
touch-action: none;
}
设置 touch-action 属性,该设置会禁用掉该元素上的浏览器代理的任何默认行为,包括缩放,移动,拖拽等.它把所有的触摸类型的交互事件都禁止掉了,导致页面也不能滚动.
4.引用fastclick库
原理:移动端,当用户点击屏幕时,会依次触发touchstart,touchmove(0次或多次),touched,mousemove,mousedown,mouseup,click,touchmove。只有当手指在屏幕发生移动的时候才会触发touchmove事件。在touchstart,touchmove或者touched事件中的任意一个调用event.preventDefault,mouse事件以及click事件将不会触发。
fastClick在touchend阶段调用event.preventDefault,然后通过document.createEvent创建一个MouseEvents,然后通过eventTarget.dispatchEvent触发对应目标元素上绑定的click事件
<script src="https://cdn.bootcdn.net/ajax/libs/fastclick/1.0.6/fastclick.js"></script>
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );