index1.html
<html>
<head>
<style>
.parent{
width:200px;
background:#ffc;
}
.child{
list-style: none;
border:1px solid red;
}
</style>
<script src="../../libs/vue.js"></script>
<script>
/*
该用例 li的点击事件, 在li本身绑定的事件发生完, 会触发父级ul上绑定的事件(冒泡)
index2-4 将会用3种方式进行解决
*/
</script>
</head>
<div id="app">
<ul class="parent" @click="parent">
<li class="child" @click="child">1</li>
<li class="child" @click="child">2</li>
<li class="child" @click="child">3</li>
</ul>
</div>
<script>
var App = new Vue({
el:"#app",
data:{},
methods:{
parent(){
alert('this is parent')
},
child(){
alert('this is child')
}
}
})
</script>
</html>预览效果:
index2.html
<html>
<head>
<style>
.parent{
width:200px;
background:#ffc;
}
.child{
list-style: none;
border:1px solid red;
}
</style>
<script src="../../libs/vue.js"></script>
<script>
/*
解决方法一 :
在vue级子级元素绑定事件用阻止冒泡, @click.stop="fn"
*/
</script>
</head>
<div id="app">
<ul class="parent" @click="parent">
<li class="child" @click.stop="child">1</li>
<!--在子元素中，绑定一个阻止冒泡的点击事件 @click.stop-->
<li class="child" @click.stop="child">2</li>
<li class="child" @click.stop="child">3</li>
</ul>
</div>
<script>
var App = new Vue({
el:"#app",
data:{},
methods:{
parent(){
alert('this is parent')
},
child(){
alert('this is child')
}
}
})
</script>
</html>index3.html
<html>
<head>
<style>
.parent{
width:200px;
background:#ffc;
}
.child{
list-style: none;
border:1px solid red;
}
</style>
<script src="../../libs/vue.js"></script>
<script>
/*
解决方式二: vue父级元素绑定事件, 传入$event参数
在父级绑定的件事处理方法中, 进行判断event.currentTarget 与event.target 是不是全等
如果全等, 就说明是父级上触发的点击事件
event.currentTarget -- 绑定事件的dom
event.target -- 当前点击的dom
*/
</script>
</head>
<div id="app">
<ul class="parent" @click="parent($event)">
<li class="child" @click="child">1</li>
<li class="child" @click="child">2</li>
<li class="child" @click="child">3</li>
</ul>
</div>
<script>
var App = new Vue({
el:"#app",
data:{},
methods:{
parent(event){
let event1 = event.currentTarget;
let event2 = event.target;
if(event1 == event2) {
alert('this is parent')
}
},
child(){
alert('this is child')
}
}
})
</script>
</html>index4.html
<html>
<head>
<style>
.parent{
width:200px;
background:#ffc;
}
.child{
list-style: none;
border:1px solid red;
}
</style>
<script src="../../libs/vue.js"></script>
<script>
/*
解决方式三: 子元素绑定事件传入$event , 处理器中进行阻止冒泡传递
event.stopPropagation();
*/
</script>
</head>
<div id="app">
<ul class="parent" @click="parent">
<li class="child" @click="child($event)">1</li>
<li class="child" @click="child($event)">2</li>
<li class="child" @click="child($event)">3</li>
</ul>
</div>
<script>
var App = new Vue({
el:"#app",
data:{},
methods:{
parent(){
alert('this is parent')
},
child(event){
alert('this is child');
event.stopPropagation();
}
}
})
</script>
</html>版权声明：本文为Dong_Alex原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。