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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
使用axios发送post请求,将JSON数据改为form类型的示例
今天小编就为大家分享一篇使用axios发送post请求,将JSON数据改为form类型的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
要实现 Vue 自定义组件改变组件背景色,你可以通过 props 将背景色作为组件的一个属性传递给组件,在组件内部监听这个属性的变化,并将其应用到组件的样式中,下面通过示例代码介绍Vue如何实现自定义组件改变组件背景色,感兴趣的朋友一起看看吧2024-03-03
这篇文章主要介绍了Vue数据驱动模拟实现的相关资料，允许采用简洁的模板语法声明式的将数据渲染进DOM，且数据与DOM绑定在一起，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
vue源码学习之Object.defineProperty 对数组监听
这篇文章主要介绍了vue源码学习之Object.defineProperty 对数组监听，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了Vue使用formData格式类型上传文件的示例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了Proxy代理对象详解,Proxy 是ES6中提供的一个非常强大的功能，可以用来代理另一个对象，从而拦截、监视并修改这个对象的各种操作,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue中四种操作dom方法，首先，在vue中强烈禁用原生与jquery来操作DOM元素。我们要充分的利用vue的优势：MVVM，在vue中程序员几乎不操作DOM，只需要维护好数据即可，vue给程序员提供ref引用，不调用api直接获取元素组件的使用2023-02-02
这篇文章主要介绍了vue 使用OSS上传图片或附件讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章主要给大家介绍了关于vue3.0公共组件自动导入的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了vue中echarts引入中国地图的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论