版权声明:Callback_heaven©版权所有 https://blog.csdn.net/weixin_41564885/article/details/80368678
事件修饰符:
在时间处理程序中调用event.preventDefault()或者event.stopPropagation()
是非常常见的需求,尽管我们可以在方法中轻松实现这一点,但是更好的方法是:
方法只有纯粹的数据逻辑,而不是去处理DOM事件细节
为了解决这个问题,Vue为v-on提供了事件修饰符,事件修饰符由.开头的指令后缀
来表示的
.stop .prevent .capture .self .once .passive |
stop:
<div v-on:click="doThis">
阻止单机事件继续传播
<button v-on:click.stop="doThischl">点击我</button>
<!--
意思就是阻止事件冒泡,当点击button时只会触发button的doThischl的点击事件,不会触发div的doThis的点击事件 -->
</div>
doThis:function(){
alert("dothis div")
},
doThischl:function(){
alert("dothischl button")
}
.prevent
<form v-on:submit.prevent>
<input type="reset" name="" value="重载">
阻止事件不在重载页面
</form>
.capture
<div v-on:click.capture="doThis">
即元素自身触发的事件在此处理,然后才交由内部元素进行处理
<button v-on:click="doThischl">内部的button</button>
谁有.capture修饰符先触发谁,如果有多个capture,则按照从外向内顺序触发,然后再事件冒泡
</div>
更详细的案例:
<div id="app"> <div @click="thisalert" id="div1"> div1 <div @click.capture="thisalert" id="div2"> div2 <div @click.capture="thisalert" id="div3"> div3 <div @click="thisalert" id="div4"> div4 </div> </div> </div> </div> </div> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ id:'' }, methods:{ thisalert: function () { this.id= event.currentTarget.id; // event.currentTarget ->返回触发的节点 alert(this.id) } } }) 点击div4的时候 触发顺序为 : 2 - 3 - 4 - 1 谁有.capture先触发谁,如果有多个,以由外向内触发,然后触发被点击的元素本身,最后冒泡 |
.self
只当在event.target是当前元素自身时触发处理函数: <!-- .self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行 --> <div v-on:click="doThat"> 即事件不是从内部元素触发的 <div @click="doThis"> div1 <div @click.self="doThis"> <!-- .self会监听事件是否直接作用在obj2上,如果不是则事件冒泡跳过该元素 --> <!-- 换个说法就是不点击div2的时候无法触发div2的事件 --> div2 <div @click="doThis"> div3 </div> </div> </div> </div> |
修饰符也可以串联使用 例如:
v-on:click.prevent.self
会阻止所有的点击
v-on:click.self.prevent
只会阻止对元素自身的点击
.once:
<div id="app"> <div @click="alertThis" id="div1"> div1 <div @click="alertThis" id="div2"> div2 <div @click.once="alertThis" id="div3"> div3 <div @click.once="alertThis" id="div4"> div4 </div> </div> </div> </div> </div> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ changText:'' } ,methods:{ alertThis:function(){ this.id = event.currentTarget.id alert(this.id) } } }) </script> 当点击带有.once修饰符的div以后,再次点击则不会再触发该事件 |
这个 .passive
修饰符尤其能够提升移动端的性能。
待深入