vue 事件在UC浏览器下无效,移动端点击事件无效, 背景图片影响等

vue 点击事件在UC浏览器下无效

今天早上朋友找我说遇到一个问题UC浏览器点击无效,听说折磨同事好久,我看看了,出了各种主意也没有解决,毕竟没有源代码无法根据问题判断原因所在,不过后来朋友告诉我解决了,用来一个方法 CSS3 新属性 pointer-events

一、问题

  1. 在 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的按钮元素,则我们在页面上看到的这个按钮,只是一个虚幻的影子而已,您可以理解为海市蜃楼,幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。

发表评论

您的电子邮箱地址不会被公开。