版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/tel13259437538/article/details/80895678
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=""（如下图所示）
用法：<button v-on:click="say1()">点击1</button>
注：v-on指令相当于绑定事件的监听器。绑定的事件触发了，就可以指定事件的处理函数。