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

手机端 :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);

效果：