vue3中的事件修飾符詳解
vue3中事件修飾符
vue3中的事件修飾符有：
.stop // 阻止事件傳遞 .prevent // 停止默認(rèn)事件 .self // 自身執(zhí)行 .capture // 使用捕獲模式 .once // 只執(zhí)行一次 .passive // 立即執(zhí)行
1、.stop
作用：阻止冒泡事件
冒泡事件：子元素的事件傳遞到父元素，即你促發(fā)子元素的click事件，由于冒泡，會(huì)使外層的父元素的click事件同時(shí)觸發(fā)。
<div @click="shout(1)">
<button @click="shout(2)">點(diǎn)擊查看內(nèi)容</button>
</div>內(nèi)容彈出時(shí)先觸發(fā)彈出2，再觸發(fā)彈出1。
方法一：在子元素的click后面直接加上.stop，就可以阻止冒泡事件了：
<div @click="shout(1)">
<button @click.stop="shout(2)">點(diǎn)擊查看內(nèi)容</button>
</div>方法二：使用參數(shù)對(duì)象的stopDefault方法，如下：
<div @click="shout(1)">
<button @click="shout(2)">點(diǎn)擊查看內(nèi)容</button>
</div>
methods: {
shout(e){
e.stopDefault()
}
}2、.prevent
作用：阻止瀏覽器的默認(rèn)事件
默認(rèn)事件：移動(dòng)端瀏覽器的下拉刷新事件、點(diǎn)擊超鏈接會(huì)跳轉(zhuǎn)頁(yè)面.......
<a rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="showInfo">點(diǎn)我提示信息</a>
如上面的示例，點(diǎn)擊a標(biāo)簽就會(huì)跳轉(zhuǎn)到新鏈接，這個(gè)時(shí)候我們需要阻止默認(rèn)事件，除了去掉href鏈接這個(gè)方法外，還可以用prevent阻止默認(rèn)事件。
方法一：在click后面直接加上.prevent，如下：
<a rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="showInfo">點(diǎn)我提示信息</a>
方法二：使用參數(shù)對(duì)象的preventDefault方法，如下：
<a rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="showInfo($event)">點(diǎn)我提示信息</a>
methods: {
showInfo(e){
e.preventDefault()
}
}3、.self
作用：阻止自身事件促發(fā)，但不會(huì)阻止冒泡
<div class="outer" @click="outer">
<div class="middle" @click.self="middle">
<button @click="inner">點(diǎn)擊</button>
</div>
</div>當(dāng)我們點(diǎn)擊button的時(shí)候，先執(zhí)行inner，傳遞到middle，此時(shí)middle里有一個(gè).self，.self阻止了middle的click事件，所以繼續(xù)冒泡到outer，執(zhí)行outer的click事件。
結(jié)果：執(zhí)行click事件的順序：inner ----> outer
4、.capture
作用：打亂冒泡順序（即可以理解為給元素添加一個(gè)監(jiān)聽(tīng)器，當(dāng)元素發(fā)生冒泡時(shí)，先觸發(fā)帶有該修飾符的元素。若有多個(gè)該修飾符，則由外而內(nèi)觸發(fā)。）
<!-- captrue:使用事件的捕捉模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
上面的執(zhí)行順序是1、25、.once
作用：事件只觸發(fā)一次（常用）
6、.passive
作用：事件的默認(rèn)行為立即執(zhí)行，無(wú)需等待事件回調(diào)執(zhí)行完畢（不常用）
不要把 .passive 和 .prevent 一起使用，因?yàn)?.prevent 將會(huì)被忽略。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)對(duì)highlight-current-row方式整行選中后修改默認(rèn)背景顏色
這篇文章主要介紹了vue實(shí)現(xiàn)對(duì)highlight-current-row方式整行選中后修改默認(rèn)背景顏色方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了element-ui在table中如何禁用其中幾行問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了基于vue.js實(shí)現(xiàn)圖片輪播效果，vue如何實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
vue路徑分為絕對(duì)路徑、相對(duì)路徑、~+路徑?及?別名+路徑,在js中,引入帶別名的文件路徑,不需要在別名前加~?,在css或者style中引入的需要在路徑前面加~,路徑以?~?開頭,其后的部分將會(huì)被看作模塊依賴,本文給大家介紹vue中引用文件路徑問(wèn)題,感興趣的朋友一起看看吧2023-12-12
Vue開發(fā)環(huán)境跨域訪問(wèn)問(wèn)題
這篇文章主要介紹了Vue開發(fā)環(huán)境跨域訪問(wèn)問(wèn)題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
Vue動(dòng)態(tài)組件component標(biāo)簽的用法大全
這篇文章主要介紹了Vue動(dòng)態(tài)組件component標(biāo)簽的用法,在Vue中，可以通過(guò)component標(biāo)簽的is屬性動(dòng)態(tài)指定標(biāo)簽，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
關(guān)于Vue.nextTick()的正確使用方法淺析
最近在項(xiàng)目中遇到了一個(gè)需求，我們通過(guò)Vue.nextTick()來(lái)解決這一需求，但發(fā)現(xiàn)網(wǎng)上這方面的資料較少，所以自己來(lái)總結(jié)下，下面這篇文章主要給大家介紹了關(guān)于Vue.nextTick()正確使用方法的相關(guān)資料，需要的朋友可以參考下。2017-08-08
vue 監(jiān)聽(tīng)窗口變化對(duì)頁(yè)面部分元素重新渲染操作
這篇文章主要介紹了vue 監(jiān)聽(tīng)窗口變化對(duì)頁(yè)面部分元素重新渲染操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
idea編譯器vue縮進(jìn)報(bào)錯(cuò)問(wèn)題場(chǎng)景分析
idea編譯器出現(xiàn)Vue縮進(jìn)報(bào)錯(cuò)，怎么解決呢，很多朋友遇到這個(gè)問(wèn)題都很棘手，不知該如何解決，今天小編給大家通過(guò)場(chǎng)景分析介紹解決方案，需要的朋友參考下吧2021-07-07
Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器的方法
最近在項(xiàng)目中使用 webpack 打包后升級(jí)，用戶反饋使用瀏覽器（chrome 45）訪問(wèn)白屏。經(jīng)過(guò)排查發(fā)現(xiàn)：由于 chrome 45 無(wú)法兼容 ES6 語(yǔ)法導(dǎo)致的，接下來(lái)給大家介紹下Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器方法,需要的朋友可以參考下2023-02-02