v-on 事件修饰符

 

事件修饰符：

 

1. .stop 阻止冒泡
2. .prevent 阻止默认事件
3. .capture 添加事件侦听器时使用事件捕获模式
4. .self 只当该事件在该元素本身时（不是子元素）触发时才回调
5. .once 事件只触发一次

一、.stop 修饰符，阻止时间冒泡：

1、未加.stop事件修饰符：

CSS部分：

    <style>
        .inner {
            background-color: green;
            height:100px;
            padding:20px;
        }

        .outer {
            padding: 10px;
            background-color: yellow;
        }
    </style>

HTML部分：

<div id="app">
       <div class="outer" @click="outerDivHandler">
           <div class="inner" @click="innerDivHandler">
               <button @click="btnHandler">点我</button>
           </div>
       </div>
</div>

JS部分：

  var app = new Vue({
            el: "#app",
            data() {
            },
            methods: {
                btnHandler() {
                    console.log("btnHandler事件触发了");
                },
                innerDivHandler() {
                    console.log("innerDivHandler事件触发了");
                },
                outerDivHandler() {
                    console.log("outerDivHandler事件触发了");
                },
            },
        });

点击按钮时，输出结果，点击按钮时分别触发了父级的点击事件。

2、添加.top属性修饰符后

    <div id="app">
        <div class="outer" @click="outerDivHandler">
            <!-- outerDiv -->
            <div class="inner" @click="innerDivHandler">
                <!-- button的点击事件添加了属性修饰符【.top】 -->
                <button @click.stop="btnHandler">点我</button>
            </div>
        </div>
    </div>

再点击button，结果，只触发了button上的事件，父级元素绑定的点击事件并没有触发。

二、.prevent修饰符，阻止默认事件

阻止元素的默认事件发生。

 <a href="http://www.baidu.com" @click="aHandler">百度一下</a> 

在浏览器上点击 百度一下 会自动跳转到百度页面，当然aHandler事件也会触发，那么怎么阻止a跳转到百度页面呢？在@click后面加上.prevent属性修饰符即可

<a href="http://www.baidu.com" @click.prevent="aHandler">百度一下</a>

再点击 百度一下  发现只执行了aHandler事件，并未跳转。

 

三、.capture 添加事件侦听器时使用事件捕获模式

 1、未添加.capture修饰符：

 <div class="inner" @click="innerDivHandler">
    <button @click="btnHandler">点我</button>
 </div>

结果：

2、添加了.capture后

<div class="inner" @click.capture="innerDivHandler">
   <button @click="btnHandler">点我</button>
</div>

结果：

 四、.self 修饰符，只有事件发生在自己身上时才触发

    <div class="inner"  @click.self="innerDivHandler">
        <button @click="aHandler">点我</button>
    </div>

点击按钮，只触发了aHandler事件。

点击绿色区域，只触发了div绑定的事件。

注意：.self只会阻止自己身上的冒泡事件发生，如果上述div还有兄弟元素也绑定了事件，未加.self修饰符，按钮也未加.stop修饰符，那么点击按钮，依然会触发其兄弟元素的事件。

 五、.once 事件只触发一次，第二次点击就没得效果了。

<button @click.once="btnHandler">点我</button>