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

  • 相关阅读:
    关于素数的具体问题
    Scala Apply
    Scala内部类
    Scala 类和对象
    Scala Tuple类型
    Scala数组
    sql server 游标
    表变量和临时表详解
    子查询详解
    EXEC 和 SP_EXECUTESQL的区别
  • 原文地址:https://www.cnblogs.com/shiyou00/p/10410935.html
Copyright © 2011-2022 走看看