如何删除延迟，直到：活动类添加到移动设备上的按钮？

发布于 2025-01-18 05:55:53 字数 2022 浏览 0 评论 0原文

在触摸屏上，当点击＆lt; button＆gt;时，将延迟约300毫秒，直到：Active样式应用于按钮。这会产生反应迟钝的感觉。

在下面的演示中，我添加了一些JavaScript代码来衡量延迟，但是在没有任何JavaScript的情况下可以看到问题。

document.addEventListener('DOMContentLoaded', function() {
  const button = document.getElementById('button')
  const log = document.getElementById('log')
  
  let touchStartTime = null
  button.addEventListener('touchstart', function() {
    touchStartTime = Date.now()
  })
  
  let wasActive = false
  window.setInterval(function() {
    const isActive = window.getComputedStyle(button).backgroundColor == 'rgb(255, 0, 0)'
    if (isActive && !wasActive) {
      if (touchStartTime == null) {
        log.innerHTML += 'No touchstart event received; are you using a touch screen?\n'
      } else {
        const delay = Date.now() - touchStartTime
        log.innerHTML += `Activation delay: ${delay}\n`
        touchStartTime = null
      }
    }
    wasActive = isActive
  }, 5)
})

* {
  touch-action: none;
}

button {
  background-color: #aaffdd;
  font-size: 500%;
}

button:active {
  background-color: #ff0000;
}

<html>
  <head>
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <button id="button">Press me</button>
    <pre id="log"></pre>
  </body>
</html>

我认为我已经完成了我需要删除延迟的所有事情：

set 触摸action：none;在所有元素上，
set width = device-width = device-width在元视图中标签。

在桌面上使用Chromium 98（开发人员工具中的移动仿真）以及Android上的Chrome尝试了。 Firefox 97也是如此，但前提是我启用触摸仿真。因此，我认为这是根据规格，而不是浏览器问题。

当然，我可以添加一些JavaScript来收听touchstart或pointerdown事件，并添加我自己的自定义.Active类。但是，如果可能的话，我想瞄准一个非JavaScript解决方案。

原文

On touch screens, when tapping a <button>, there is a delay of about 300 milliseconds until the :active style is applied to the button. This results in an unresponsive feeling.

In the demo below, I've added some JavaScript code to measure the delay, but the issue is visible without any JavaScript as well.

document.addEventListener('DOMContentLoaded', function() {
  const button = document.getElementById('button')
  const log = document.getElementById('log')
  
  let touchStartTime = null
  button.addEventListener('touchstart', function() {
    touchStartTime = Date.now()
  })
  
  let wasActive = false
  window.setInterval(function() {
    const isActive = window.getComputedStyle(button).backgroundColor == 'rgb(255, 0, 0)'
    if (isActive && !wasActive) {
      if (touchStartTime == null) {
        log.innerHTML += 'No touchstart event received; are you using a touch screen?\n'
      } else {
        const delay = Date.now() - touchStartTime
        log.innerHTML += `Activation delay: ${delay}\n`
        touchStartTime = null
      }
    }
    wasActive = isActive
  }, 5)
})

* {
  touch-action: none;
}

button {
  background-color: #aaffdd;
  font-size: 500%;
}

button:active {
  background-color: #ff0000;
}

<html>
  <head>
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <button id="button">Press me</button>
    <pre id="log"></pre>
  </body>
</html>

I think I've done all the things I need to remove delays:

set touch-action: none; on all elements,
set width=device-width in the meta viewport tag.

Tried with Chromium 98 on desktop (mobile emulation in developer tools), as well as Chrome on Android. The same happens in Firefox 97 but only if I enable touch emulation. So I think it's according to spec, and not a browser issue.

Of course I can add some JavaScript to listen for touchstart or pointerdown events and add my own custom .active class. But I'd like to aim for a non-JavaScript solution if possible.

分享到QQ

分享到微博