1.使用 .stop 可阻止冒泡
冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
一般用法就是理解为触发事件A, 会触发A的父亲,爷爷,爷爷的父亲…
<div id="app">
<div class="inner" @click="innerClick">
<input type="button" value="戳我" @click="btnClick">
</div>
</div>
methods:{
innerClick(){
console.log("这是innerClick");
},
btnClick(){
console.log("这是btnClick");
}
}
会触发冒泡
<input type="button" value="戳我" @click.stop="btnClick">
使用 .stop 可以阻止冒泡
2.使用 .capture 可触发捕获事件的机制
<!-- 使用 .capture 可触发捕获事件的机制 -->
<div class="outer" @click.capture="outerClick">
<div class="inner" @click="innerClick">
<input type="button" value="戳我" @click="btnClick">
</div>
</div>
写了.capture从外到里,没写的按冒泡进行触发
3.使用 .prevent 可阻止默认行为
4.使用 .self 实现只有点击当前元素时才会触发事件
5.使用 .once 事件只触发一次,第二次点击事件失效
.self 和 .stop 区别:
.self 只能阻止自身冒泡触发,并不能阻止冒泡的行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入vue包 -->
<script src="./lib/vue.js"></script>
<style>
.inner {
height: 150px;
background-color: pink;
}
.outer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用 .stop 可阻止冒泡 -->
<div class="inner" @click="innerClick">
<input type="button" value="戳我" @click.stop="btnClick">
</div>
<!-- 使用 .prevent 可阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题先去百度</a>
<!-- 使用 .capture 可触发捕获事件的机制 -->
<div class="outer" @click.capture="outerClick">
<div class="inner" @click="innerClick">
<input type="button" value="戳我" @click="btnClick">
</div>
</div>
<!-- 使用 .self 实现只有点击当前元素时才会触发事件 -->
<div class="inner" @click.self="innerClick">
<input type="button" value="戳我" @click="btnClick">
</div>
<!-- 使用 .once 事件只触发一次,第二次点击事件失效 -->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题先去百度</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
outerClick() {
console.log("这是outerClick");
},
innerClick() {
console.log("这是innerClick");
},
btnClick() {
console.log("这是btnClick");
},
linkClick() {
console.log("这是点击跳转");
}
}
})
</script>
</body>
</html>