本博客编辑总监博主:博客链接
编辑人本博主:博客链接
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 修饰,别的修饰符有不起作用了。
本篇博客为个人理解的总结,如有错误,请指正!