vue点击事件、vue阻止冒泡事件、 @click.stop、 v-on:click.stop、vue点击阻断、vue点击子集的方法不执行父级的方法
程序员文章站
2022-06-22 15:55:29
相信点击事件是在vue框架里面的一个常用的方法正常的点击事件为 v-on:click=“方法名(参数)”简写为@click=“方法名(参数)”有些情况下会出现父级元素有点击事件、子元素也有点击事件这样就会出现点击子元素会执行两次方法正常情况下点击列表的关闭按钮会删除元素但是它的父元素有点击添加样式的功能所以在点击列表删除按钮的时候会删除列表这个字段、但是会给第三个元素添加样式由于列表这个字段已经删除了、所以活给我的这个字段添加样式在这里我添加了alert方便大家区分#app{ widt...
相信点击事件是在vue框架里面的一个常用的方法
正常的点击事件为 v-on:click=“方法名(参数)”
简写为@click=“方法名(参数)”
有些情况下会出现父级元素有点击事件、子元素也有点击事件
这样就会出现点击子元素会执行两次方法
正常情况下点击列表的关闭按钮会删除元素
但是它的父元素有点击添加样式的功能
所以在点击列表删除按钮的时候会删除列表这个字段、但是会给第三个元素添加样式
由于列表这个字段已经删除了、所以活给我的这个字段添加样式
在这里我添加了alert方便大家区分
#app{ width: 100%; height: 100%;}
.navList{
width: 500px;
margin: 100px auto;
overflow: hidden;
}
.navList span{
cursor: pointer;
float: left;
border: 1px solid #ddd;
padding: 5px 15px;
border-radius: 6px;
margin: 0 10px;
}
.navList span:hover,.navList span.on{
background-color: #0A98D5;
color: #fff;
border-color: #0A98D5;
}
.navList span i{
font-style: normal;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 50%;
}
.navList span i:hover{
background-color: #ccc;
color: #fff;
}
<div id="app">
<div class="navList">
<span @click="gotoMenu({num, item})" v-for="(item, num) in navList" :key="num" :class="isActive === num ? 'on' : ''">{{item}} <i @click="deteletBtn({num, item})">x</i></span>
</div>
</div>
var app = new Vue({
el: '#app',
data: {
navList: ['首页', '详情', '列表', '我的'],
isActive: 0,
},
methods: {
gotoMenu (e) {
alert('给' + e.item + '添加样式')
this.isActive = e.num
},
deteletBtn (e) {
alert('删除' + e.item + '标签,这是第' + e.num + '个元素')
this.navList.splice(e.num,1);
}
}
})
所以在这种情况下直接写点击事件得到的效果就不是你所想要的
所以就需要增加一个阻断事件、防止事件继续冒泡
在此只需要给@click事件添加stop方法就可以
@click.stop="deteletBtn({num, item})"
<div id="app">
<div class="navList">
<span @click="gotoMenu({num, item})" v-for="(item, num) in navList" :key="num" :class="isActive === num ? 'on' : ''">{{item}} <i @click.stop="deteletBtn({num, item})">x</i></span>
</div>
</div>
本文地址:https://blog.csdn.net/weixin_48201140/article/details/107359526