Vue----.stop、.prevent、.capture、.self用法以及.stop和.self的区别-蒲公英云

Vue----.stop、.prevent、.capture、.self用法以及.stop和.self的区别

1、” .stop “：阻止冒泡，具体事例，在点击【戳他】按钮后，触发 input对应的函数 ‘btnHandler’，该函数执行完成后，会触发div的函数’ divHandler ‘，为了防止此类情况的发生，需要在Input的点击事件上添加” .stop “。

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

2、” .prevent “ : 使用 “ .prevent “ 阻止默认行为，在超链接中的点击事件中使用该属性，超链接不会跳转而只执行函数对应的内容。

<!-- 使用 .prevent 阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">去百度</a>

3、” .capture “ ：实现捕获触发事件的机制，在点击【戳他】按钮后，先执行div标签的函数，再执行【戳他】按钮，对应的函数。

<!-- 使用 .capture 实现捕获触发事件的机制 -->
<div class="inner" @click.capture="divHandler">
   <!-- 从外到里 -->
   <input type="button" value="戳他" @click.stop="btnHandler">
</div>

4、” .self “：只有点击当前元素的时候，才会触发事件处理函数。点击【戳他】按钮，只执行【戳他】按钮对应的函数，而不会冒泡执行div中的函数，div中的函数只有点击时才触发。

<div class="inner" @click.self="divHandler">
   <input type="button" value="戳他" @click.stop="btnHandler">
</div>

5、” .once “: 只触发一次事件处理函数。点击【有问题，先去百度】，执行a标签对应的函数，再次点击会跳转到百度页面。

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

6、” .stop “和” .self “的区别：” .self “只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为。” .stop “会阻止所有的冒泡的行为。

点击【戳他】后只执行【戳他】对应的函数，往上的两个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>