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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vues中使用JavaScript實現(xiàn)路由跳轉(zhuǎn)的步驟詳解
在Vue應(yīng)用中,利用Vue?Router進行頁面間的導(dǎo)航是一個常見需求,本篇博客將通過示例代碼詳細介紹如何在Vue組件中使用JavaScript實現(xiàn)路由跳轉(zhuǎn),需要的朋友可以參考下2024-05-05
element-ui動態(tài)添加表單項并實現(xiàn)事件觸發(fā)驗證代碼示例
這篇文章主要給大家介紹了關(guān)于element-ui動態(tài)添加表單項并實現(xiàn)事件觸發(fā)驗證的相關(guān)資料,其實就是利用了vue的v-for循環(huán)渲染,通過添加數(shù)組實現(xiàn)動態(tài)添加表單項,需要的朋友可以參考下2023-12-12
今天小編就為大家分享一篇vue解決一個方法同時發(fā)送多個請求的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3提供了許多常用的API,這些API可以幫助開發(fā)者更高效地構(gòu)建和管理Vue應(yīng)用,這篇文章主要介紹了vue3一些不常用卻很實用API的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2026-02-02
本篇文章主要介紹了vue 里面使用axios 和封裝的示例代碼，非常具有實用價值，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了VUE常見知識疑點問題總結(jié),詳細介紹了vue.js @click和v-on:click有什么區(qū)別,v-on和v-bind的區(qū)別,通過本文可以認識Vue的export、export default、import的詳細介紹,感興趣的朋友一起看看吧2024-02-02
vue/cli3.0腳手架部署到nginx時頁面空白的問題及解決
這篇文章主要介紹了vue/cli3.0腳手架部署到nginx時頁面空白的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
VUE?Element修改el-input和el-select長度的具體步驟
這篇文章主要給大家介紹了關(guān)于VUE?Element修改el-input和el-select長度的具體步驟,文中通過代碼介紹的非常詳細,對大家學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
vuex?mutations的兩種調(diào)用方法小結(jié)
這篇文章主要介紹了vuex?mutations的兩種調(diào)用方法小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue中實現(xiàn)左右聯(lián)動的效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-06-06