vue中事件修饰符，stop,prevent,capture,self,once

1,stop修饰符，能够阻止冒泡事件，按照案例说明如下：
按钮在div容器中。
①，点击框中非按钮的位置，会触发div的事件

②点击图中 “stop事件” 按钮 ，会发生冒泡事件，执行按钮事件的同时，也会执行div的事件
注意：此时还没加stop事件

③，代码添加stop事件后（@click.stop）的效果，控制台打印结果如下，
stop会阻止事件冒泡行为。

代码如下：

<template>
    <div>
        <!-- 使用 .stop阻止冒泡 -->
        <div @click="stopDivHandler" class="stop">
            <p>1,使用stop会阻止冒泡的事件</p>
            <p>2,div的click事件:stopDivHandler</p>
            <p>3,按钮的click事件:stopBtnHandler</p>
            <input type="button" value="stop事件" @click.stop="stopBtnHandler">
        </div>
    </div>
</template>

<script>
    export default {
        name: "eventTest",
        methods:{
            stopDivHandler(){
                console.log("方法名称：stopDivHandler，触发了div的事件。。。");
            },
            stopBtnHandler(){
                console.log("方法名称：stopBtnHandler，触发了stop按钮的事件。。。");
            },
        }
    }
</script>

<style scoped lang="stylus">
    .stop{
        border  1px solid red;
        width:400px;
        height 400px;
    }

</style>

2，prevent修饰符
使用prevent修饰符会阻止事件的默认行为，如下案例中，链接地址“去百度页”不会跳转到百度页面中

代码如下

<div class="prevent">
            <!-- 使用 .prevent 阻止默认行为 -->
            <p>
                &lt;a href="http://www.baidu.com" @click.prevent="linkClick"&gt;去百度页&lt;/a&gt;

            </p>
             <a href="http://www.baidu.com" @click.prevent="linkClick">去百度页</a>
        </div>

3，capture修饰符
capture 实现捕获触发事件 当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。 就是谁有该事件修饰符，就先触发谁。

代码如下：

 <div class="capture" @click.capture="captureDivHandler">
             <p>capture 实现捕获触发事件的机制  </p>
             <p>capture 实现捕获触发事件 当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。
                 就是谁有该事件修饰符，就先触发谁。 </p>
          <input type="button" value="capture按钮" @click="captureBtnHandler">
        </div>

函数方法如下：

            captureDivHandler(){
                console.log("方法名称：captureDivHandler，触发了captureDiv事件。。。");
            },
            captureBtnHandler(){
                console.log("方法名称：captureBtnHandler，触发了capture 按钮事件。。。");
            }

4，self
使用 .self 实现只有点击当前元素时候，才会触发事件处理函数，下面的案例是点击按钮，只触发了按钮本身的事件。

 <div class="inner" @click.self="div1Handler">
             <p>
                 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数
                 <br>
                 .self 放在div 元素上
             </p>
          <input type="button" value="self按钮" @click="btnHandler">
        </div>

5，once
使用 .once 只触发一次事件处理函数
本案例有两个小的案例
①点击绿色边框once后，边框绑定的事件只触发了一次，再次点击，方法不执行
②链接地址“百度一下“ 有一个方法 @click.prevent.once=“linkClick” ，也只执行了一次linkClick方法 ，再次点击“百度一下” 则会跳转到百度首页

代码如下

 <div class="inner">
            <!-- 使用 .once 只触发一次事件处理函数 -->
             <a href="http://www.baidu.com" target="_blank" @click.prevent.once="linkClick">百度一下</a>
            <div @click.once="onceLice" style="width:100px;height: 100px;border:1px solid green">
                once
            </div>
        </div>

            linkClick() {
                console.log('触发了连接的点击事件')
            },
           
            onceLice(){
                console.log("once事件====")
            }

6 .stop和self的区别
一，stop说明
描述：
①首先点击外框，执行了外框的点击事件
②点击内框，执行了内框的点击事件，事件冒泡，执行了外框的事件
③点击按钮，按钮添加了stop，只触发了自己的事件，阻止了冒泡

代码如下：

 <!--  .stop 和 .self 的区别 -->
         <div class="outer" @click="div2Handler">
          <div class="inner" @click="div1Handler">
            <input type="button" value="stop按钮" @click.stop="btnHandler">
          </div>
        </div>

二，self说明
.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为

案例说明
①点击外框，只触发了外框事件
②点击内框，触发了内框事件和外框事件，内框含有self
③点击按钮，触发了按钮事件和外框事件，而内框事件没有执行(内框有self)
所以，.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为

代码如下：

 <div class="outer" @click="div2Handler">
          <div class="inner" @click.self="div1Handler">
            <input type="button" value="普通按钮" @click="btnHandler" style="margin-top: 100px">
          </div>
        </div>

方法如下：

            div1Handler() {
                console.log('这是触发了 inner div 的点击事件')
            },
            btnHandler() {
                console.log('这是触发了 btn 按钮 的点击事件')
            },
            div2Handler() {
                console.log('这是触发了 outer div 的点击事件')
            },