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+ElementUI下载文件的几种方式(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了react和vue的区别分析，在面试中经常会遇到，小编通过实例文字相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue清除地址栏路由参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了新手入门vue 使用vue-cli创建项目的图文教程，本文是针对完全不了解过vue和npm的小白而写的,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了2分钟实现一个Vue实时直播系统的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要为大家详细介绍了vue.js初学入门教程,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要给大家介绍了关于vue.js中Vue-router 2.0基础实践的相关资料，其中包括vue-router 2.0的基础用法、动态路由匹配、嵌套路由、编程式路由、命名路由以及命名视图等相关知识，需要的朋友可以参考借鉴，下面来一起看看吧。2017-05-05
这篇文章主要给大家介绍了关于vue中el-tree动态初始默认选中和全选实现的相关资料,eltree默认选中eltree是一种常用的树形控件,通常用于在网页上呈现树形结构的数据,例如文件夹、目录、组织结构等,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了Vue 中如何将函数作为 props 传递给组件的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-05
这篇文章主要介绍了vue的路由映射问题及解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
最新评论