v-on 事件修饰符

事件修饰符：

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

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

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

CSS部分：

 1     <style>
 2         .inner {
 3             background-color: green;
 4             height:100px;
 5             padding:20px;
 6         }
 7 
 8         .outer {
 9             padding: 10px;
10             background-color: yellow;
11         }
12     </style>

HTML部分：

1<div id="app">
2        <div class="outer" @click="outerDivHandler">
3            <div class="inner" @click="innerDivHandler">
4                <button @click="btnHandler">点我</button>
5            </div>
6        </div>
7 </div>

JS部分：

 1   var app = new Vue({
 2             el: "#app",
 3             data() {
 4             },
 5             methods: {
 6                 btnHandler() {
 7                     console.log("btnHandler事件触发了");
 8                 },
 9                 innerDivHandler() {
10                     console.log("innerDivHandler事件触发了");
11                 },
12                 outerDivHandler() {
13                     console.log("outerDivHandler事件触发了");
14                 },
15             },
16         });

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

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

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

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

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

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

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

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

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

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

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

1、未添加.capture修饰符：

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

结果：

2、添加了.capture后

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

结果：

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

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

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

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

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

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

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