Safari 中 :active 伪类失效？可能是移动端点击太快惹的祸

最近在开发移动端项目时，我遇到了一个奇怪的问题：在 iOS 设备上，使用 :active 伪类为按钮添加点击效果时，它不起作用。然而，在 PC 上一切正常。

经过一番探索，我发现问题出在 iOS 上鼠标事件的处理上。原来，iOS 设备上的鼠标事件太快了，导致按钮无法触发 :active 状态。因此，:active 状态只能在设置了 touch 事件的元素上触发。

问题根源：iOS 上的鼠标事件

要理解这个问题，我们首先需要了解 iOS 如何处理鼠标事件。与 PC 不同，iOS 设备没有物理鼠标。相反，它们使用触摸屏来模拟鼠标事件。

当用户在 iOS 设备上单击或点按元素时，系统会生成两个事件：

• touchstart ：当手指第一次接触屏幕时触发。
• touchend ：当手指从屏幕上抬起时触发。

这些事件通常与鼠标事件（例如 click 和 mouseup）对应。但是，iOS 系统对鼠标事件进行了优化，使其更快。这会导致在某些情况下，例如快速单击时，:active 状态无法触发。

解决方案：在可触摸元素上使用 :active

要解决这个问题，我们需要在可触摸元素上使用 :active 伪类。这意味着我们必须使用 HTML 元素（例如按钮或链接），这些元素具有 touchstart 和 touchend 事件监听器。

例如，我们可以这样修改我们的代码：

<button onclick="myFunction()">点击我</button>

button:active {
  background-color: red;
}

通过这种方法，:active 状态将仅在用户触摸按钮时触发。

替代方案：使用 JavaScript

如果无法使用可触摸元素，另一种方法是使用 JavaScript 来模拟 :active 状态。我们可以使用以下代码：

const button = document.querySelector('button');

button.addEventListener('touchstart', () => {
  button.classList.add('active');
});

button.addEventListener('touchend', () => {
  button.classList.remove('active');
});

这将使用 JavaScript 手动添加和删除 active 类，从而模拟 :active 状态。