关于苹果手机:active设置无效的问题

Write By Monkeyfly

以下内容均为原创,如需转载请注明出处。

前提

  • 今天早上群里有人提问:iphone 不兼容CSS的:active怎么破?
  • 我也是第一次听说这个问题,为了找到解决方法,于是去百度搜了一下。

原因

其实就是:苹果手机浏览页面中设置的css伪类:active失效了。

解决方法

  • 在iOS系统的移动设备中,需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。
  • 要让css的:active伪类生效,只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功。
  • Use the :active pseudo-class in your css, then add ontouchstart="" and onmouseover="" to the body tag.(在您的css中使用:active伪类,然后添加ontouchstart=“”和onmouseover=“”到body标签。)
//非常简单
<body ontouchstart="" onmouseover="">
body>

参考资料

  • 移动端ios:active伪类无效的兼容解决方案
  • IOS兼容CSS:active效果
  • iphone safari浏览器CSS兼容性的解决方案集合
  • css - Hover effects using CSS3 touch events - Stack Overflow
  • iphone - :active pseudo-class doesn’t work in mobile safari - Stack Overflow

问题来了:vue该怎么绑?
答:使用v-on指令。即v-on:touchstart=""(如下图所示)

关于苹果手机:active设置无效的问题_第1张图片

用法:
注:v-on指令相当于绑定事件的监听器。绑定的事件触发了,就可以指定事件的处理函数。

你可能感兴趣的:(遇到的问题)