vue子元素绑定的事件, 阻止触发父级上的事件处理方式
更新时间：2023年11月15日 10:05:22 作者：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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue给数组中对象排序 sort函数的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue组件中的data必须是一个function的原因浅析，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
vue中过滤器的作用可被用于一些常见的文本格式化,也就是修饰文本,但是文本内容不会改变,下面这篇文章主要给大家介绍了关于VUE中filters过滤器的两种用法,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了vue Antd 输入框Input自动聚焦方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue项目百度地图如何自定义标注marker问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本文是小编给大家收藏整理的关于vue项目前端知识点，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了vue移动端弹起蒙层滑动禁止底部滑动操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了Vue如何使用fabric.js实现局部截图与el-image-viewer大图预览功能,文中的示例代码讲解详细,感兴趣的可以了解下2024-02-02
vue3中require报错require is not defined问题及解决
这篇文章主要介绍了vue3中require报错require is not defined问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了关于Vue组件间的常用传参方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论