快捷導(dǎo)航

VUE3 click點(diǎn)擊事件及修飾符詳解

更新時(shí)間：2024年08月16日 15:10:39 作者：GIS-CL

這篇文章主要介紹了VUE3 click點(diǎn)擊事件及修飾符的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

只綁定一個(gè)點(diǎn)擊事件

<button @click="greet">單個(gè)點(diǎn)擊事件</button>

methods:{
        greet(){
            console.log('單個(gè)點(diǎn)擊事件')
        }
    }

一個(gè)標(biāo)簽內(nèi)綁定多個(gè)點(diǎn)擊事件方法

<button @click="one($event), two($event)">多個(gè)點(diǎn)擊事件</button>

methods:{
        one(e){
            console.log(e)
        },
        two(e){
            console.log(e)
        }
    }

事件修飾符

.stop 阻止單擊事件繼續(xù)冒泡（適用于出現(xiàn)嵌套點(diǎn)擊事件時(shí)）

<div @click="box('我是大box')" style="width:500px; background:red">
    <button @click.stop="doThis('我是內(nèi)嵌點(diǎn)擊事件按')">單個(gè)點(diǎn)擊事件</button>
 </div>

 methods:{
        doThis(val){
            console.log(val)
        },
        box(val){
            console.log(val)
        }
    }

.prevent 阻止默認(rèn)事件

<form action="">
    <!-- 默認(rèn)提交事件 -->
    <!-- <input type="submit" value="提交"> -->
    <!-- 阻止默認(rèn)事件 -->
    <input type="submit" value="提交" @click.prevent="submitCLICK('prevent阻止默認(rèn)事件')">
  </form>

methods:{
        submitCLICK(val){
            console.log(val)
        }
    }

.capture 即內(nèi)部元素觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理

<form action="">
    <input type="submit" value="提交" @click.capture="submitCLICK('capture先在此處理')">
  </form>

methods:{
        submitCLICK(val){
            console.log(val)
        }
    }

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

<button @click.once="ononce('點(diǎn)擊事件將只會(huì)觸發(fā)一次')">點(diǎn)擊事件將只會(huì)觸發(fā)一次</button>

methods:{
        ononce(val){
            console.log(val)
        }
    }

.passive用在移動(dòng)端的scroll事件，來(lái)提高瀏覽器響應(yīng)速度，提升用戶體驗(yàn)

<!-- 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā)，   -->
<div @scroll.passive="onScroll">...</div>

修飾符串聯(lián)使用（按循序執(zhí)行）

// 按循序執(zhí)行先執(zhí)行阻止冒泡事件在執(zhí)行阻止默認(rèn)事件
<a @click.stop.prevent="doThat"></a>

TIP

不要把 .passive 和 .prevent（阻止默認(rèn)事件）一起使用，因?yàn)?.prevent 將會(huì)被忽略，同時(shí)瀏覽器可能會(huì)向你展示一個(gè)警告。

請(qǐng)記住，.passive 會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為。

按鍵修飾符

Vue 為最常用的鍵提供了別名：

.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

<!-- 只有在 `key` 是 `Enter` 時(shí)調(diào)用 `vm.submit()` 按enter鍵執(zhí)行 -->
<input @keyup.enter="submit" />
<!-- 按delete 鍵執(zhí)行 -->
<input @keyup.delete="submit" />

系統(tǒng)修飾鍵

.ctrl
.alt
.shift
.meta

<!-- Alt + Enter 時(shí)觸發(fā)-->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click 按住加點(diǎn)擊時(shí)觸發(fā)-->
<div @click.ctrl="doSomething">Do something</div>