vue點擊事件、vue阻止冒泡事件、 @click.stop、 v-on:click.stop、vue點擊阻斷、vue點擊子集的方法不執行父級的方法

 

相信點擊事件是在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>