欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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=“方法名(参数)”
有些情况下会出现父级元素有点击事件、子元素也有点击事件
这样就会出现点击子元素会执行两次方法
vue点击事件、vue阻止冒泡事件、 @click.stop、 v-on:click.stop、vue点击阻断、vue点击子集的方法不执行父级的方法
正常情况下点击列表的关闭按钮会删除元素
但是它的父元素有点击添加样式的功能
所以在点击列表删除按钮的时候会删除列表这个字段、但是会给第三个元素添加样式
由于列表这个字段已经删除了、所以活给我的这个字段添加样式
在这里我添加了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

相关标签: vue vue