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