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 修饰，别的修饰符有不起作用了。

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