【移动端】300ms延迟以及点透事件原因以及解决方案

产生原因

移动端会有双击缩放的这个操作,因此浏览器在click之后要等待300ms,看用户有没有下一次点击,也就是这次操作是不是双击

说完移动端点击300ms延迟的问题,还不得不提一下移动端点击穿透的问题。可能有人会想,既然click点击有300ms的延迟,那对于触摸屏,我们直接监听touchstart事件不就好了吗?
使用touchstart去代替click事件有两个不好的地方。
第一:touchstart是手指触摸屏幕就触发,有时候用户只是想滑动屏幕,却触发了touchstart事件,这不是我们想要的结果;
第二:使用touchstart事件在某些场景下可能会出现点击穿透的现象。

点透是什么?

假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数,该回调函数的作用是隐藏B元素。我们发现,当我们点击B元素,B元素被隐藏了,随后,A元素触发了click事件。

点透产生的原因?

这是因为在移动端浏览器,事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟,当touchstart事件把B元素隐藏之后,隔了300ms,浏览器触发了click事件,但是此时B元素不见了,所以该事件被派发到了A元素身上。如果A元素是一个链接,那此时页面就会意外地跳转。

点透的解决根本方案就是解决300ms延迟的问题

300ms延迟解决方案

【禁用缩放】

既然双击缩放仅对那些可被缩放的页面来说有存在意义,那对于不可缩放的页面,直接去掉点击延迟,何乐而不为呢?这里所说的不可缩放,是指使用了下述 标签的页面。

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

缺点:你必须完全禁用缩放来达到目的,而从移动端站点的可用性和可访问性来看,缩放是相当关键的一环。你很可能已经遇到过这个问题,即你想要放大一张图片或者一段字体较小的文本,却发现无法完成操作。

【width=device-width】

除了双击缩放的约定外,iPhone 诞生时就有的另一个约定是,在渲染桌面端站点的时候,使用 980 像素的视口宽度,而非设备本身的宽度(iPhone 是 320 像素宽)。

<meta name="viewport" content="width=device-width"> // 告诉浏览器 视口宽度 = 设备宽度

那么设置这个跟300ms有什么关系呢?
在 Chrome 32 这一版中,他们将在包含 width=device-width 或者置为比 viewport 值更小的页面上禁用双击缩放。当然,没有双击缩放就没有 300 毫秒点击延迟。

除了浏览器开发商提供的方案外,还有一个更加通用的方案FastClick

fastClick

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。

【使用】

window.addEventListener( "load", function() {
    FastClick.attach( document.body );
}, false );

attach() 方法虽可在更具体的元素上调用,直接绑定到 上可以确保整个应用都能受益。当 FastClick 检测到当前页面使用了基于 标签或者 touch-action 属性的解决方案时,会静默退出。可以说,这是真正的跨平台方案出来之前一种很好的变通方案。

【原理】
移动浏览器的事件触发顺序:touchstart -> touchend -> click

FastClick 在检测到 touchend 事件的时候,会通过 DOM 自定义事件立即触发一个模拟 click 事件,并把浏览器在 300 毫秒之后真正触发的 click 事件阻止掉。

小结

由于现在浏览器一直在进步,所以针对自己的开发需求,选择合适的方案。时代在变,技术在变,尤其是这种因为浏览器所导致的bug,每一个时期的解决方案是不一致的。具体也可以看看fastClick README.md 中有这么一段话。

As of late 2015 most mobile browsers - notably Chrome and Safari - no longer have a 300ms touch delay, so fastclick offers no benefit on newer browsers, and risks introducing bugs into your application. Consider carefully whether you really need to use it.

截至2015年底,大多数移动浏览器——尤其是Chrome和Safari——不再有300ms的触摸延迟,因此,在较新的浏览器上,fastclick没有任何好处,而且可能会给应用程序带来bug。仔细考虑是否真的需要使用它。

原文地址:https://www.cnblogs.com/shiyou00/p/10410935.html