快捷導(dǎo)航

vue中的事件修飾符once,prevent,stop,capture,self,passive

更新時(shí)間：2022年04月22日 08:55:36 作者：翼晗

這篇文章主要介紹了vue中的事件修飾符once,prevent,stop,capture,self,passive，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue中的事件修飾符

1. once

只執(zhí)行一次

<div v-on:click.once='alert("1")'></div>

只有在第一次點(diǎn)擊時(shí)會(huì)執(zhí)行，再次點(diǎn)擊不會(huì)起作用

2. prevent

阻止默認(rèn)程序，比如form表單中的summit提交按鈕，會(huì)自己提交，

<form v-on:submit="alert('who')" action="first_submit" method="get" accept-charset="utf-8">
? ? ? ? first_submit
? ? ? ? get
? ? ? ? <input type="submit" name="">
? ? </form>

現(xiàn)在的submit會(huì)進(jìn)行數(shù)據(jù)提交，和跳轉(zhuǎn)

<form v-on:submit.prevent="alert('who')" action="first_submit" method="get" accept-charset="utf-8">
? ? ? ? first_submit
? ? ? ? get
? ? ? ? <input type="submit" name="">
? ? </form>

prevent，直接不讓你提交了，也不跳轉(zhuǎn)，只是執(zhí)行自己命名的函數(shù)，個(gè)人覺得這個(gè)修飾符使用的并不多，完全可以不做submit，我自己寫個(gè)click更方便?。?！

3. stop

阻止函數(shù)的傳遞

<div v-on:click='alert("1")' style="width: 100%;height: 45px;background-color: black;">
? ? ? ? ? ? <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
? ? ? ? ? ? ? ? 123
? ? ? ? ? ? </div>
? ? ? ? </div>

此時(shí)點(diǎn)擊子級(jí)的div會(huì)，先彈出2，再?gòu)棾?

<div v-on:click.capture='alert("1")' style="width: 100%;height: 45px;background-color: black;">
? ? ? ? ? ? <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
? ? ? ? ? ? ? ? 123
? ? ? ? ? ? </div>
? ? ? ? </div>

點(diǎn)擊子級(jí)的div，此時(shí)的執(zhí)行結(jié)果是，先彈出1，再?gòu)棾?（capture的作用）

<div v-on:click.capture.stop='alert("1")' style="width: 100%;height: 45px;background-color: black;">
? ? ? ? ? ? <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
? ? ? ? ? ? ? ? 123
? ? ? ? ? ? </div>
? ? ? ? </div>

點(diǎn)擊子級(jí)的div，此時(shí)的執(zhí)行結(jié)果是只會(huì)彈出1（capture決定的執(zhí)行順序），不會(huì)執(zhí)行alert(‘2’)

<div v-on:click='alert("1")' style="width: 100%;height: 45px;background-color: black;">
? ? ? ? ? ? <div v-on:click.stop="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
? ? ? ? ? ? ? ? 123
? ? ? ? ? ? </div>
? ? ? ? </div>

這樣就只會(huì)彈出2，不會(huì)彈出1 了

總之，stop就是你自己執(zhí)行你的就好了，別去打擾別人。

4. capture和self

因?yàn)樵谑褂胏apture和self的時(shí)候有一些迷糊，有一篇單獨(dú)介紹他倆個(gè)的文章

初步理解vue中的capture和self

5. passive與prevent相反

javascript中的preventDefault()

passive就是專門用來跟他們作對(duì)的，使他們不起作用，同時(shí)，passive不能和prevent同時(shí)使用，prevent會(huì)失效，而且會(huì)警告?。?nbsp;

vue事件處理（修飾符）

事件修飾符

在vue中為了只處理純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)，vue.js提供了事件修飾符。

.stop 阻止單擊事件繼續(xù)傳播

<a v-on:click.stop="doThis"></a>

.prevent 提交事件不再重載頁面

<form v-on:submit.prevent></form>

.capture 添加事件監(jiān)聽器時(shí)使用事件捕獲模式，即內(nèi)部元素觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理

<div v-on:click.capture="doThis">...</div>

.self 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù)，即事件不是從內(nèi)部元素觸發(fā)的

<div v-on:click.self="doThat">...</div>

.once 點(diǎn)擊事件將只會(huì)觸發(fā)一次

<a v-on:click.once="doThis"></a>

.passive 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā)，而不會(huì)等待 `onScroll` 完成，這其中包含 `event.preventDefault()` 的情況

<div v-on:scroll.passive="onScroll">...</div>

注：修飾符可以串聯(lián)，使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。

<a v-on:click.stop.prevent="doThat"></a>

按鍵修飾符

vue 允許為 v-on 在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符：

enter
page-down

//只有在 `key` 是 `Enter` 時(shí)調(diào)用 `vm.submit()`
<input v-on:keyup.enter="submit">
//處理函數(shù)只會(huì)在 $event.key 等于 PageDown 時(shí)被調(diào)用
<input v-on:keyup.page-down="onPageDown">

系統(tǒng)修飾鍵

.ctrl
.alt
.shift
.meta

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
?
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

注：請(qǐng)注意修飾鍵與常規(guī)按鍵不同，在和 keyup 事件一起用時(shí)，事件觸發(fā)時(shí)修飾鍵必須處于按下狀態(tài)

.exact 修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件

<!-- 即使 Alt 或 Shift 被一同按下時(shí)也會(huì)觸發(fā) -->
<button v-on:click.ctrl="onClick">A</button>
?
<!-- 有且只有 Ctrl 被按下的時(shí)候才觸發(fā) -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
?
<!-- 沒有任何系統(tǒng)修飾符被按下的時(shí)候才觸發(fā) -->
<button v-on:click.exact="onClick">A</button>