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