腳本之家服務器常用軟件

快捷導航

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

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

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

vue中的事件修飾符

1. once

只執(zhí)行一次

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

只有在第一次點擊時會執(zhí)行，再次點擊不會起作用

2. prevent

阻止默認程序，比如form表單中的summit提交按鈕，會自己提交，

<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會進行數(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ù)，個人覺得這個修飾符使用的并不多，完全可以不做submit，我自己寫個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>

此時點擊子級的div會，先彈出2，再彈出1

<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>

點擊子級的div，此時的執(zhí)行結(jié)果是，先彈出1，再彈出2（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>

點擊子級的div，此時的執(zhí)行結(jié)果是只會彈出1（capture決定的執(zhí)行順序），不會執(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>

這樣就只會彈出2，不會彈出1 了

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

4. capture和self

因為在使用capture和self的時候有一些迷糊，有一篇單獨介紹他倆個的文章

初步理解vue中的capture和self

5. passive與prevent相反

javascript中的preventDefault()

passive就是專門用來跟他們作對的，使他們不起作用，同時，passive不能和prevent同時使用，prevent會失效，而且會警告！！

vue事件處理（修飾符）

事件修飾符

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

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

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

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

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

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

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

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

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

.once 點擊事件將只會觸發(fā)一次

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

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

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

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

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

按鍵修飾符

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

enter
page-down

//只有在 `key` 是 `Enter` 時調(diào)用 `vm.submit()`
<input v-on:keyup.enter="submit">
//處理函數(shù)只會在 $event.key 等于 PageDown 時被調(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>

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

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

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