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>