- .stop阻止冒泡行为
@click.stop=“btnClick”; - .prevent阻止跳转行为
- .capture捕获触发事件，冒泡的反序
- .self点击只触发自己，冒泡，捕获什么都不管
- .stop和.self的区别：
（1）.stop是用在冒泡的最底层，取消的是所有冒泡事件；
（2）.self是用在你想要取消的某一层的上面，这样其他的冒泡事件不会被取消，只有自己的会被取消。
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.inner{
background: yellow;
height: 100px;
}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<!--1..stop-->
<!--<div id="app">-->
<!--<div class="inner" @click="innerClick">-->
<!--<input type="button" value="点击我试试" class="btn" @click.stop="btnClick">-->
<!--</div>-->
<!--</div>-->
<!--2..prevent阻止跳转事件-->
<!--<div id="app">-->
<!--<a href="http://www.baidu.com" @click.prevent="aClick">没事多用百度，有事没事都可以找度娘</a>-->
<!--</div>-->
<!--3. .capture捕获事件-->
<!--<div id="app">-->
<!--<div class="inner" @click.capture="innerClick">-->
<!--<input type="button" value="点击我试试" class="btn" @click="btnClick">-->
<!--</div>-->
<!--</div>-->
<!--3. .self事件-->
<div id="app">
<div class="inner" @click.self="innerClick">
<input type="button" value="点击我试试" class="btn" @click="btnClick">
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "",
},
methods: {
btnClick () {
console.log("这是点击的btn");
},
innerClick(){
console.log("这是点击的innerdiv");
},
aClick(){
console.log("这是a标签的点击");
}
}
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
