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>

执行效果如下:
vue事件修饰符prevent、self、native_第1张图片
点击 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>

执行效果如下:
vue事件修饰符prevent、self、native_第2张图片
点击 a标签 弹框,跳转
点击 div标签,不弹框,跳转
也就是 self 修饰符 只阻止事件冒泡的事件行为,不阻止自身的事件行为,具有主观性。

native

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

vue事件修饰符prevent、self、native_第3张图片
点击 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>

vue事件修饰符prevent、self、native_第4张图片
点击 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>

vue事件修饰符prevent、self、native_第5张图片
点击 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>

vue事件修饰符prevent、self、native_第6张图片
点击 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 修饰,别的修饰符有不起作用了。

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

你可能感兴趣的:(#,前端框架vue,prevent,vue,self,vue,native,vue事件修饰符)