vue事件修饰符prevent、self、native

本博客编辑总监博主：博客链接
编辑人本博主：博客链接

v-on事件

v-on指令用于绑定事件，例如：

v-on指令简写：v-on:click="show" 可以简写为 @click="show"
v-on:mouseover="show" 可以简写为 @mouseover="show"

v-on事件修饰符

prevent

<!-- 阻止跳转行为 -->
<div id="box"><div @click="alert1()"><a href="/#" @click.prevent="alert2()">a标签<div @click="alert3()">div标签</div></a></div>
</div>

执行效果如下：

点击 a标签，弹框，不跳转
点击 div标签，弹框，不跳转
也就是在click事件绑定 prevent 修饰符阻止页面跳转。

self

<!-- 阻止事件冒泡点击行为，主观性 -->
<div id="box"><div @click="alert1()"><a href="/#" @click.self="alert2()">a标签<div @click="alert3()">div标签</div></a></div>
</div>

执行效果如下：

点击 a标签弹框，跳转
点击 div标签，不弹框，跳转
也就是 self 修饰符只阻止事件冒泡的事件行为，不阻止自身的事件行为，具有主观性。

native

<!-- 阻止默认事件行为 -->
<div id="box"><div @click="alert1()"><a href="/#" @click.native="alert2()">a标签<div @click="alert3()">div标签</div></a></div>
</div>

点击 a标签，不弹框，跳转
点击 div标签，不弹框，跳转
也就是native修饰符阻止默认事件（点击）行为，既阻止自己事件行为，也阻止冒泡事件行为。

v-on事件修饰符组合分析(敲黑板、画重难点)

prevent.self

<!-- 官网：阻止所有点击 -->
<div id="box"><div @click="alerttt()"><a href="/#" @click.prevent.self="alertrrrr()">a标签<div @click="alertllll()">div标签</div></a></div>
</div>

点击 a标签，弹框，不跳转
点击 div标签，不弹框，不跳转
意思是：click prevent self 结合时，自己事件行为（点击 a标签）时，会执行 click（单击）和 prevent（阻止跳转）行为，不触发 self（阻止事件，即弹框），也就是 self 没有起到阻止弹框的作用，于是效果是：弹框，不跳转；而事件冒泡（点击div标签）时，会执行 click prevent 和 self 三个关键字，效果就是：不弹框，不跳转。

self.prevent

<!-- 官网：阻止元素自身的点击 -->
<div id="box"><div @click="alerttt()"><a href="/#" @click.self.prevent="alertrrrr()">a标签<div @click="alertllll()">div标签</div></a></div>
</div>

点击 a标签，弹框，不跳转
点击 div 标签，不弹框，跳转
也就是 click self prevent 三者结合时，自己事件行为（点击 a标签）时，执行 click 和 prevent 行为，而事件冒泡时，会执行 click 和 self 行为。

native.prevent / prevent.native

<!-- 阻止默认行为 -->
<!-- native和prevent组合时，native执行了，prevent就不会执行，native优先级>prevent -->
<!-- 点击自己不显示，跳转；事件冒泡不显示，跳转-->
<div id="box"><div @click="alerttt()"><a href="/#" @click.native.prevent="alertrrrr()">a标签<div @click="alertllll()">div标签</div></a></div>
</div>

点击 a标签，不弹框，跳转
点击 div标签，不弹框，跳转
当 click native prevent 三者结合时，效果与 click native 两个修饰符相同，没有执行 prevent 修饰符。

总结分析

当事件修饰符组合使用时，需要注意优先级情况：

prevent 在前时，修饰的是v-on 事件，不管是自己事件行为还是冒泡事件行为，都会执行 prevent 行为，也就是阻止跳转。
prevent 在后时，修饰的是 v-on 被 self 修饰后的事件，当执行 self 行为时，不执行 prevent 行为，当不执行 self 行为时，执行 prevent 行为。
只要有 self 修饰符时，自己事件行为，就不会执行 self (阻止事件) 行为，也就是弹框，而冒泡会执行 self 行为，也就是不弹框。
native 与其他结合使用时，不管顺序如何，和单独的 native 行为，效果都相同，也就是事件中只要有 native 修饰，别的修饰符有不起作用了。

本篇博客为个人理解的总结，如有错误，请指正！