Vue事件修饰符

1· .stop 阻止冒泡

    <!-- 使用 .stop 阻止冒泡 -->
    <!-- 点击按钮 先触发btn的click事件 然后向上冒泡, 触发div的click事件  加上.stop阻止冒泡 只触发btn的 -->
    <div class="inner" @click="divHander"> 
        <input type="button" value="戳我" @click.stop="btnHander"/>
    </div>

2· .prevent 阻止默认行为

<!-- 使用 .prevent 阻止默认行为 -->
    <a href="https://www.baidu.com/" @click.prevent="linkClick">有问题,就去百度咯</a>

3· .capture 实现捕获触发事件机制

<!-- 使用 .capture 实现捕获触发事件机制 -->
    <!-- 点击按钮 先触发div的click事件 然后向下触发btn的事件 -->
    <div class="inner" @click.capture="divHander"> 
        <input type="button" value="戳我" @click="btnHander"/>
    </div>

4· .self 实现只有点击当前元素时候 , 才会触发事件处理函数

<!-- 使用 .self 实现只有点击当前元素时候 , 才会触发事件处理函数 -->
    <!-- 点各自触发各自的事件,不通过冒泡或捕获的方式触发别的元素的事件 -->
    <div class="inner" @click.self="divHander"> 
        <input type="button" value="戳我" @click="btnHander"/>
    </div>

5· .once 只触发一次事件处理函数

<!-- 使用 .once 只触发一次事件处理函数 -->
    <a href="https://www.baidu.com/" @click.prevent.once="linkClick">有问题,就去百度咯</a>

.stop 和 .self 的区别: .self只会阻止自己身上冒泡行为的触发,并不会真正阻止冒泡的行为(会一直向上冒泡)

完整代码如下:

<div id="app">
        <!-- 使用 .stop 阻止冒泡 -->
        <!-- 点击按钮 先触发btn的click事件 然后向上冒泡, 触发div的click事件  加上.stop阻止冒泡 只触发btn的 -->
        <div class="inner" @click="divHander"> 
            <input type="button" value="戳我" @click.stop="btnHander"/>
        </div>
        
        <!-- 使用 .prevent 阻止默认行为 -->
        <a href="https://www.baidu.com/" @click.prevent="linkClick">有问题,就去百度咯</a>
        
        <!-- 使用 .capture 实现捕获触发事件机制 -->
        <!-- 点击按钮 先触发div的click事件 然后向下触发btn的事件 -->
        <div class="inner" @click.capture="divHander"> 
            <input type="button" value="戳我" @click="btnHander"/>
        </div>
        
        <!-- 使用 .self 实现只有点击当前元素时候 , 才会触发事件处理函数 -->
        <!-- 点各自触发各自的事件,不通过冒泡或捕获的方式触发别的元素的事件 -->
        <div class="inner" @click.self="divHander"> 
            <input type="button" value="戳我" @click="btnHander"/>
        </div>
        
        <!-- 使用 .once 只触发一次事件处理函数 -->
        <a href="https://www.baidu.com/" @click.prevent.once="linkClick">有问题,就去百度咯</a>
    </div>
    <script type="text/javascript"> 
        var vm= new Vue({
            el:'#app',
            data:{},
            methods:{
                divHander() {
                    console.log('触发了 div 的点击事件')
                },
                btnHander() {
                    console.log('触发了 Btn 的点击事件')
                },
                linkClick() {
                    console.log('触发了 a链接 的点击事件')
                }
            }
        })
    </script>