Vue中@click.stop與@click.prevent解讀

更新時間：2025年02月05日 08:40:19 作者：AI研思錄

Vue中,`@click.stop`用于阻止事件冒泡,而`@click.prevent`用于阻止事件的默認(rèn)行為,這兩個方法在處理事件時非常有用

Vue中@click.stop與@click.prevent

一、@click.stop

問題：

父元素中添加了一個click事件，其下面的子元素中也添加了click事件，此時，我想點擊子元素獲取子元素的點擊事件，但卻觸發(fā)的是父元素的事件：

<view class="footer-box" @click="clickCard">
		<view @click="footerClick('喜歡')"><text class="footer-box__item">喜歡</text></view>
		<view @click="footerClick('評論')"><text class="footer-box__item">評論</text></view>
		<view @click="footerClick('分享')"><text class="footer-box__item">分享</text></view>
</view>

此時，我們就需要使用@click.stop：阻止事件冒泡方法來解決這個問題：

<view class="footer-box" @click="clickCard">
		<view @click.stop="footerClick('喜歡')"><text class="footer-box__item">喜歡</text></view>
		<view @click.stop="footerClick('評論')"><text class="footer-box__item">評論</text></view>
		<view @click.stop="footerClick('分享')"><text class="footer-box__item">分享</text></view>
</view>

二、@click.prevent

還有一個與之相似的方法：@click.prevent：阻止事件的默認(rèn)行為，

例如：

在代碼里寫入一個a標(biāo)簽，點擊會跳轉(zhuǎn)到目標(biāo)鏈接網(wǎng)頁中：

<view class="example-body">
	<a  rel="external nofollow"  rel="external nofollow" >百度</a>
</view>

但如果我們不想讓它跳轉(zhuǎn)但還想使用a標(biāo)簽的話，此時就需要使用@click.prevent方法：

<view class="example-body">
	<a  rel="external nofollow"  rel="external nofollow"  @click.prevent='notLink'>百度</a>
</view>

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue.js獲取數(shù)據(jù)庫數(shù)據(jù)實例代碼
本篇文章主要介紹了vue.js獲取數(shù)據(jù)庫數(shù)據(jù)實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
daisyUI解決TailwindCSS堆砌class問題詳解
這篇文章主要為大家介紹了daisyUI解決TailwindCSS堆砌class問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
vue項目打包以及優(yōu)化的實現(xiàn)步驟
項目完成，我們會將項目進(jìn)行上線，為了提升性能，我們往往會進(jìn)行一些優(yōu)化處理，本文主要介紹了vue項目打包以及優(yōu)化的實現(xiàn)步驟，感興趣的可以了解一下
2021-07-07
Vue項目查看當(dāng)前使用的elementUI版本的方法
今天小編就為大家分享一篇Vue項目查看當(dāng)前使用的elementUI版本的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue實現(xiàn)省市區(qū)三級聯(lián)動
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)省市區(qū)三級聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
vue 使用print-js 打印渲染不出來問題
這篇文章主要介紹了vue 使用print-js 打印渲染不出來問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue3使用MD5加密實戰(zhàn)案例(清晰明了)
MD5是一種信息摘要算法(對稱加密),一種被廣泛使用的密碼散列函數(shù),可以產(chǎn)生出一個128位(16字節(jié))的散列值,用來確保信息傳輸完整一致性,這篇文章主要給大家介紹了關(guān)于Vue3使用MD5加密的相關(guān)資料,需要的朋友可以參考下
2023-05-05
vue如何使用moment處理時間戳轉(zhuǎn)換成日期或時間格式
這篇文章主要給大家介紹了關(guān)于vue如何使用moment處理時間戳轉(zhuǎn)換成日期或時間格式的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2022-03-03
vue在取對象長度length時候出現(xiàn)undefined的解決
這篇文章主要介紹了vue在取對象長度length時候出現(xiàn)undefined的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
axios取消請求的實踐記錄分享
今天小編就為大家?guī)硪黄猘xios取消請求的實踐記錄分享，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09