vue数据事件修饰符

戏子无情 提交于 2019-11-30 18:05:52

vue数据在嵌套div的时候会产生冒泡,既点击了下层的div标签,上层也会出发点击效果。如何防止呢,使用click.stop即可

<div id="app">
    <div class="parent" @click="parentClick">
        <div class="sub" @click.stop="subClick" >
            <div class="child" @click.stop="childClick">

            </div>
        </div>
    </div>

</div>

file

阻止默认事件

<a href="http://www.baidu.com" @click.prevent="aClick" >baidu</a>

click.self 只有在自己身上触发的时候才执行

<div id="app">
    <div class="parent" @click="parentClick">
        <div class="sub" @click.self="subClick" >
            <div class="child" @click.stop="childClick">

            </div>
        </div>
    </div>
    <a href="http://www.baidu.com" @click.prevent="aClick" >baidu</a>

</div>

file edit by cherrydot

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!