0%

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

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

1
2
3
4
button:active {
background-color: black;
color: white;
}

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

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

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

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

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

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

参考资料:
:active on MDN web docs