Vue2事件修饰符浅析

,

capture

实现捕获触发事件的机制；各自触发各自的作用域

1
2
3
<div class="inner" @click.capture="divHandel">
    <input type="button" value="点击" @click.capture="btnHandel">
</div>

prevent

阻止默认行为，无论多少次都只触发进入方法 不会触发跳转href

1
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题去百度</a>

prevent.once

第一次触发进入方法 第二次触发跳转href

1
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题去百度</a>

stop

阻止冒泡，触发后，btnHandler该函数执行完成后，阻止会触发div的函数 divHandler

1
2
3
4
<div class="inner" @click="divHandler"> 
      <!-- 使用 .stop 阻止冒泡 -->
     <input type="button" value="戳他" @click.stop="btnHandler">
</div>

self

触发后，btnHandler该函数执行完成后，阻止会触发div的函数 divHandler

1
2
3
<div class="inner" @click.self="divHandel">
    <input type="button" value="点击" @click="btnHandel">
</div>

self stop 区别

.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为
.stop 会阻止所有的冒泡的行为

1
2
3
4
5
6
7
8
9
10
11
12
  <!--点击【戳他】后只执行【戳他】对应的函数，往上的两个div中的函数不执行。-->
  <div class="outer" @click="div2Handler">
   <div class="inner" @click="divHandler">
       <input type="button" value="戳他" @click.stop="btnHandler">
   </div>
 </div> 
  <!--点击【戳他】后，会执行 btnHandler和div2Handler函数，而不执行divHandler函数。-->
  <div class="outer" @click="div2Handler">
    <div class="inner" @click.self="divHandler">
        <input type="button" value="戳他" @click="btnHandler">
    </div>
</div>