• 【移动端】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。仔细考虑是否真的需要使用它。

  • 相关阅读:
    原生js片段
    IE 怪异模式(Quirks Mode)对 HTML 页面的影响
    CSS3 @font-face 的使用
    css面试题——九宫格
    一些前端冷知识
    利用 document.domain 在当前的域名或者基础域名 实现跨域
    JS 判断浏览器客户端类型(ipad,iphone,android)
    防止网站被iframe调用
    doctype 的各种声明
    JQUERY中的事件处理:RETURN FALSE、阻止默认行为、阻止冒泡以及兼容性问题
  • 原文地址:https://www.cnblogs.com/shiyou00/p/10410935.html
Copyright © 2020-2023  润新知