0
点赞
收藏
分享

微信扫一扫

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

效果:

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


举报

相关推荐

0 条评论