- .stop阻止冒泡
.prevent阻止默认事件
.capture 捕获机智
.self 只有点击自己才执行(只会阻止自己发生的冒泡,并不会阻止别人的冒泡)
.once 只触发一次就失效
<body>
<div id="app">
<div class="box" @click="div">
<!-- .stop阻止冒泡,当父标签和子标签重合后,点击子标签执行时间后父标签也会随着执行,就会出问题,加上.stop就可以阻止冒泡 -->
<button @click.stop="but">点我</button>
</div>
<!-- .prevent阻止默认时间,这个a标签默认打开链接,加上这个.prevent就可以禁止默认事件了,类似的还有form表单 -->
<a href="http://www.baidu.com" @click.prevent="clj">超链接</a>
<!-- .capture 捕获机智,和冒泡是相反的,冒泡是先执行子标签 在执行父标签,捕获机制是先执行当前点击的,在执行后面的 -->
<div class="box" @click.capture="div">
<!-- .stop阻止冒泡,当父标签和子标签重合后,点击子标签执行时间后父标签也会随着执行,就会出问题,加上.stop就可以阻止冒泡 -->
<button @click.stop="but">点我</button>
</div>
<!-- .self 只有点击自己才执行 -->
<div class="box" @click.self="div">
<!-- .stop阻止冒泡,当父标签和子标签重合后,点击子标签执行时间后父标签也会随着执行,就会出问题,加上.stop就可以阻止冒泡 -->
<button @click="but">点我</button>
</div>
<!-- .once 只触发一次就失效 -->
<a href="http://www.baidu.com" @click.prevent.once="clj">超链接</a>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "张毅大帅逼!",
},
methods: {
div() {
console.log("点击了div")
},
but() {
console.log("点击了按钮")
},
clj(){
console.log("点击超链接了")
}
}
})
</script>