手机端 :active 样式不起作用的原因，如何解决

一、原因

很多时候我们在 PC 端使用很好的 :active 样式，在移动端却没有效果。
原因是：
​​​:active​​​ 只有在 dom 元素被点击时，有 ​​click​​​ 事件才会有的状态。
除了 PC 端的 ​​​click​​​ 事件，移动端有 ​​touch​​​ 事件，并且 ​​touch​​​ 相关事件的优先级要高于 ​​click​​​ 事件，如果 ​​touch​​​ 事件被取消，就不会有 ​​click​​​ 事件，所以才会产生移动端点击时没有 ​​:active​​样式的原因。

MDN 相关说明，查看 Event Order 一段:
​​​https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent​​

二、解决办法

如果你不需要在项目中使用 ​​touch​​​ 事件，在 ​​js​​​ 文件中添加如下内容，那么所有的 ​​:active​​ 相关的样式都会生效了。

document.addEventListener("touchstart", function() {},false);

效果：