vue子元素绑定的事件, 阻止触发父级上的事件处理方式
作者：phpzx.cn
这篇文章主要介绍了vue子元素绑定的事件, 阻止触发父级上的事件处理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue子元素绑定的事件,阻止触发父级上的事件处理
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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。