Vue @click.stop阻止事件向祖先元素傳遞方式(事件冒泡)
最近遇到這么一個(gè)問題：
有一個(gè)父div，包含一個(gè)子div。要求單擊父div時(shí)執(zhí)行fun()函數(shù)，而單擊子div時(shí)不執(zhí)行fun()函數(shù)。
可以使用 @click.stop 阻止事件向父級元素傳遞
1、@click.stop介紹
在Vue中，@click是一個(gè)指令，用于監(jiān)聽元素的點(diǎn)擊事件。@click.stop是其中的一個(gè)修飾符，它的作用是阻止事件冒泡，即阻止事件向父級元素傳遞。
具體來說，當(dāng)一個(gè)元素被點(diǎn)擊時(shí)，它所處的DOM層級結(jié)構(gòu)中的所有父級元素都會接收到該事件。如果在父級元素上也綁定了類似的@click事件，那么這個(gè)事件也會被觸發(fā)。而使用了@click.stop修飾符的元素，當(dāng)它被點(diǎn)擊時(shí)，事件將不會再向父級元素傳遞。這可以避免事件被不必要地多次觸發(fā)。
2、任何事件都不觸發(fā)
<template>
<div @click="fun">
<div @click.stop>
<!--子div-->
</div>
</div>
</template>
<script>
export default {
methods: {
fun() {
// 點(diǎn)擊父div時(shí)執(zhí)行的功能
console.log('單擊了父div');
},
},
}
</script>
3、不觸發(fā)父級事件，觸發(fā)屬于自己的事件
<template>
<div @click="doSomething">
<button @click.stop="doSomethingElse">不會觸發(fā)父級元素的點(diǎn)擊事件</button>
</div>
</template>
<script>
export default {
methods: {
doSomething() {
console.log('doSomething')
},
doSomethingElse() {
console.log('doSomethingElse')
}
}
}
</script>
在上面的示例中，當(dāng)點(diǎn)擊按鈕時(shí)，只會觸發(fā)doSomethingElse方法，不會觸發(fā)doSomething方法。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
文章介紹了一個(gè)Vue組件,該組件允許用戶通過鼠標(biāo)右鍵在畫布上繪制矩形,并且支持通過Ctrl鍵進(jìn)行多選,文章附帶了組件代碼和一個(gè)示例,建議讀者將代碼復(fù)制到自己的開發(fā)環(huán)境中進(jìn)行調(diào)試2024-12-12
這篇文章主要介紹了在Vue中使用icon 字體圖標(biāo)的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
sass或者less都提供變量設(shè)置，在需求切換主題的項(xiàng)目中使用less或者sass變量，這篇文章主要介紹了vue引入sass全局變量，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
vue點(diǎn)擊按鈕實(shí)現(xiàn)讓頁面的某一個(gè)元素全屏展示
這篇文章主要介紹了vue點(diǎn)擊按鈕實(shí)現(xiàn)讓頁面的某一個(gè)元素全屏展示，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue 2.5 Level E 發(fā)布了： 新功能特性一覽
很高興Vue 2.5 Level E 發(fā)布了。在這篇文章中，我們將重點(diǎn)介紹一些更重要的的變化：更好的 TypeScript 集成，更好的錯(cuò)誤處理，更好地支持單文件組件中的函數(shù)式組件以及與環(huán)境無關(guān)的服務(wù)端渲染2017-10-10
這篇文章主要為大家介紹了Vite的createServer啟動源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue scroll滾動判斷的實(shí)現(xiàn)(是否滾動到底部、滾動方向、滾動節(jié)流、獲取滾動區(qū)域dom元素)
這篇文章主要介紹了vue scroll滾動判斷的實(shí)現(xiàn)(是否滾動到底部、滾動方向、滾動節(jié)流、獲取滾動區(qū)域dom元素)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了vue移動端輕量級的輪播組件實(shí)現(xiàn)代碼，一個(gè)簡單的移動端卡片滑動輪播組件，適用于Vue2.x。本文給大家?guī)砹藢?shí)例代碼，需要的朋友參考下吧2018-07-07
vue菜單欄聯(lián)動內(nèi)容頁面tab的實(shí)現(xiàn)示例
本文主要介紹了vue菜單欄聯(lián)動內(nèi)容頁面tab的實(shí)現(xiàn)示例,左側(cè)菜單欄與右側(cè)內(nèi)容部分聯(lián)動,當(dāng)點(diǎn)擊左側(cè)的菜單,右側(cè)會展示對應(yīng)的tab,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
解決Vue運(yùn)算符報(bào)錯(cuò):Syntax Error: Unexpected token問題
這篇文章主要介紹了解決Vue運(yùn)算符報(bào)錯(cuò):Syntax Error: Unexpected token問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01