vue 点击事件在UC浏览器下无效
今天早上朋友找我说遇到一个问题UC浏览器点击无效,听说折磨同事好久,我看看了,出了各种主意也没有解决,毕竟没有源代码无法根据问题判断原因所在,不过后来朋友告诉我解决了,用来一个方法 CSS3 新属性 pointer-events
一、问题
- 在 UC 浏览器点击事件无效(其他浏览器无问题)。
附上朋友源码:<template> <div class="music" @click="playBtn"> <div class="control"><-- 背景图片 --></control> </div> </template> <script> export default { data() { return { isPlay: true } }, methods: { playBtn() { if (this.isPlay) { // 切换图片 } } } } </script>
二、分析原因(个人理解,不喜勿喷,有错误请指出,感谢)
因为移动端部分浏览器点击图片放大,所以会在子元素默认给你绑定一个事件,就会影响你父级元素绑定的事件。
注意:子元素有背景图片或者子元素是img。
img 我添加默认事件可以理解,背景图片也影响是什么鬼,估计是检索url地址给元素绑定默认事件了。
我记得微信浏览器也可以点击放大图片,微信点击放大图片是通过微信API将图片传给微信,点击图片就可以放大了。但是 UC 这个就恶心了,你检索页面图片地址调用你自己的API,但是你绑定默认事件时别影响我正常事件啊。
三、解决方法 pointer-events
给子元素添加样式:
.control {
poninter-events: none;
}
四、 pointer-events详解
简介
官方解释:
pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。
个人理解和使用:
pointer-event:none; 顾名思义是鼠标事件拜拜的意思,元素使用了该属性,链接啊,点击什么的都统统失效了。
pointer-events:none 的作用是让元素实体“虚化”。例如一个应用pointer-events:none的按钮元素,则我们在页面上看到的这个按钮,只是一个虚幻的影子而已,您可以理解为海市蜃楼,幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。