active 伪类在 iOS 中不触发的问题

Posted on 2017-08-11 Edited on 2021-03-11 In 大钱端

点击按钮的时候通常会为按钮提供一个按压高亮的处理，这时候我们就会用到 :active 伪类

button:active {
  background-color: black;
  color: white;
}

在安卓手机上当我们按下按钮的时候，:active 的表现和我们的预期是一致的，按钮会呈现按压态。但是在 iOS 设备上却没有效果。

查阅了一下文档，发现上面写着这句话：

[1] Safari Mobile 默认不使用:active 状态，除非元素上或上有一个touchstart 事件处理器。

也就是说在 iOS 设备上只有我们监听了 body 的 touchstart 事件，:active 才会有效果。所以我们这样做：

1	document.body.addEventListener('touchstart', () => {});

添加上述代码后，:active 就可以被正常触发了。