版权声明:转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82823998
<div id="enjoy">
<!--
使用.stop 阻止冒泡(阻止上级所有层的事件)
仅son
-->
<div class="father" @click="father">
<div class="son" @click.stop="son"></div>
</div>
<!--
使用.prevent 阻止默认事件
不会跳转页面
-->
<a href="https://www.baidu.com" @click.prevent="preventBehavior">百度一下</a>
<!--
使用.capture 添加事件侦听器时使用事件捕获模式(一般默认冒泡事件由里向外)
先father后son
-->
<div class="father" @click.capture="father">
<div class="son" @click="son"></div>
</div>
<!--
使用.self 实现只有点击当前元素时,才会触发事件函数(仅阻止当前事件冒泡)
只有点father时弹窗,点son不弹
-->
<div class="father" @click.self="father">
<div class="son" @click="son"></div>
</div>
<!--
使用.once 只触发一次事件处理函数(此例中连带.prevent也失效)
第一次点击仅弹窗,之后正常跳转不弹窗
-->
<a href="https://www.baidu.com" @click.prevent.once="preventBehavior">百度一下</a>
</div>
{
new Vue({
el:'#enjoy',
data:{},
methods:{
father(){
alert('father');
},
son(){
alert('son');
},
preventBehavior(){
alert('hello');
}
}
})
}