首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
anjianshi
V2EX  ›  问与答

iOS 13 下网页点击事件又出现了类似 300ms 的延迟,有大佬知道是什么原因吗?

  •  
  •   anjianshi · 121 天前 · 1267 次点击
    这是一个创建于 121 天前的主题,其中的信息可能已经有所发展或是发生改变。

    无论是 touchstart 还是 click 都会有延迟;并且快速点击 10 次,大约只会生效 5 ~ 6 次。
    iOS 12 下就不会。 会不会和新加的触感触控有关?

    <!doctype html>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
    
    <div id="app">
      <div class="count-wrap">
        <div>当前数量:<span id="num"></span></div>
        <div id="btn">更新数量</div>
      </div>
    </div>
    
    <script>
      var i = 0
      function setNum() {
        document.getElementById('num').innerHTML = i
      }
      setNum()
      document.getElementById('btn').onclick = function() {
        i += 1
        setNum()
      }
    </script>  
    
    <style>
    * {
      margin: 0;
      padding: 0;
    }
    #app {
      padding: 20px;
    }
    .count-wrap {
      margin-top: 40px;
    }
    #btn {
      width: 6em;
      padding: 0.3em;
      border: 1px solid #ccc;
      border-radius: 2px;
      text-align: center;
      margin-top: 1em;
      background-color: #f0f0f0;
      /* -webkit-tap-highlight-color: transparent; */
      user-select: none;
    }
    #btn:active {
      background-color: #fafafa;
    }
    </style>
    
    14 回复  |  直到 2019-09-24 17:32:57 +08:00
    anjianshi
        1
    anjianshi   121 天前
    zacharyjia
        2
    zacharyjia   121 天前
    好像确实有类似的情况,我的感觉是有时候点链接一次没效果,得点第二次才能开始打开新网页
    oIMOo
        3
    oIMOo   120 天前   ♥ 1
    慢速点击(两次间隔较长)没有问题。
    然而快速点击就会复现。
    redbuck
        4
    redbuck   120 天前   ♥ 1
    加 touch-action: manipulation; 试试
    anjianshi
        5
    anjianshi   120 天前
    @redbuck 加了没有效果

    ```css
    #btn { touch-action: manipulation; }
    ```
    redbuck
        6
    redbuck   120 天前
    看了下你的 demo,这个测试不太合理啊.

    试试这个.
    我测试是不存在 300ms 延迟的.

    点击齿轮可以打开控制台

    ```html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/eruda/1.5.8/eruda.min.js"></script>
    <title>Title</title>
    </head>
    <body>
    <button id="btn">点击</button>

    <script type="text/javascript">
    eruda.init();
    const btn = document.getElementById('btn');

    btn.addEventListener('touchstart', function () {
    console.time('click');
    });

    btn.addEventListener('click', function () {
    console.timeEnd('click');
    });
    </script>
    </body>
    </html>

    ```
    anjianshi
        7
    anjianshi   120 天前
    @redbuck touchstart 本身都被延迟触发了的。这个和以前的 300ms 情况不太一样。
    我的那个演示页面,ios12 下,连续点击 10 下计数就是 10,ios13 下就是 5
    anjianshi
        8
    anjianshi   120 天前
    http://anjianshi.net/touch3.html
    这个版本改成监听 touchstart 了
    redbuck
        9
    redbuck   120 天前
    @anjianshi 300 毫秒延迟一般就是指 click 比 touchstart 晚 300ms.

    不过你说的问题也是存在.感觉事件被节流了,点再快都按固定频率输出
    chairuosen
        10
    chairuosen   120 天前
    实验了,是真的
    redbuck
        11
    redbuck   120 天前
    @anjianshi 不是 300ms 延迟应该不会影响正常页面,对网页游戏之类的可能才有影响
    belin520
        12
    belin520   120 天前   ♥ 1
    iOS 13.1 已经修好了
    anjianshi
        13
    anjianshi   120 天前
    嗯。影响不是很大,不过像数字小键盘之类的组件点起来会有点卡。
    anjianshi
        14
    anjianshi   120 天前
    @belin520 哦哦哦,那明天升级试试看!
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1981 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 29ms · UTC 05:21 · PVG 13:21 · LAX 21:21 · JFK 00:21
    ♥ Do have faith in what you're doing.