vue 点击的区域有两个元素分别绑定了不同事件，怎么设置触发事件的优先级？

问题描述：

vue 点击的区域有两个元素分别绑定了不同事件，怎么设置触发事件的优先级？
也就是说，你想点击的区域很小，紧接着这个区域的还有一块很大的区域也绑定了事件，当点击的位置包含了这两个区域，，如何只触发其中一个区域而不触发另外一个区域，这两个区域是同级关系，不是父子关系

答

内部小区域通过传入的事件对象阻止冒泡到父元素就行，示例如下，有帮助麻烦点个采纳【本回答右上角】，谢谢~~


<div id="app">
    <div v-on:click="outerclick">
        Block Outer
        <div v-on:click="innerclick">Block1</div>
        Block Outer
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        methods: {
            outerclick(e) { alert('outerclick') },
            innerclick(e) {
                e.stopPropagation()
                alert('innerclick')
            }
        }
    })
</script>

答

优先级设置不了，但可以通过index属性，设置层级，一般点击到了那个元素就会触发那个元素的事件，可以通过js方法判断合法流程。

答

@click.stop

<div id="app">
        <div v-on:click="dodo">
            <button v-on:click.stop="doThis">阻止单击事件</button>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                name: "Vue.js"
            },
            methods: {
                doThis: function () {
                    alert("noclick");
                },
                dodo: function () {
                    alert("dodo");
                }
            }
        });
    </script>

答

点击区域小的阻止冒泡

vue 点击的区域有两个元素分别绑定了不同事件，怎么设置触发事件的优先级？

相关推荐