在工作中总是能遇到冒泡事件,总是会影响其他方法的使用,那么下面就简单说说阻止时间冒泡的方法吧!
千言万语不如直接上代码清晰明了:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<div @click="click1" style="width:400px;height: 400px;background-color: red;">
<div @click="click2($even)" style="width:200px;height: 200px;background-color: blue;">
// vue中直接在@click后面添加stop就可以阻止其冒泡,非常简单方便
<div @click.stop="click3" style="width:100px;height: 100px;background-color: gold;"></div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '测试冒泡事件哈'
},
methods:{
click1(){
console.log('111')
},
click2(e){
console.log('222')
// jQuery中使用stopPropagation()方法来解决冒泡问题
e.stopPropagation()
},
click3(){
console.log('333')
}
}
})
</script>
</body>
</html>