Vue中@click.stop與@click.prevent解讀
更新時(shí)間：2025年02月05日 08:40:19 作者：AI研思錄
Vue中,`@click.stop`用于阻止事件冒泡,而`@click.prevent`用于阻止事件的默認(rèn)行為,這兩個(gè)方法在處理事件時(shí)非常有用
Vue中@click.stop與@click.prevent
一、@click.stop
問題：
父元素中添加了一個(gè)click事件，其下面的子元素中也添加了click事件，此時(shí)，我想點(diǎn)擊子元素獲取子元素的點(diǎn)擊事件，但卻觸發(fā)的是父元素的事件：
<view class="footer-box" @click="clickCard">
<view @click="footerClick('喜歡')"><text class="footer-box__item">喜歡</text></view>
<view @click="footerClick('評(píng)論')"><text class="footer-box__item">評(píng)論</text></view>
<view @click="footerClick('分享')"><text class="footer-box__item">分享</text></view>
</view>此時(shí)，我們就需要使用@click.stop：阻止事件冒泡方法來解決這個(gè)問題：
<view class="footer-box" @click="clickCard">
<view @click.stop="footerClick('喜歡')"><text class="footer-box__item">喜歡</text></view>
<view @click.stop="footerClick('評(píng)論')"><text class="footer-box__item">評(píng)論</text></view>
<view @click.stop="footerClick('分享')"><text class="footer-box__item">分享</text></view>
</view>二、@click.prevent
還有一個(gè)與之相似的方法：@click.prevent：阻止事件的默認(rèn)行為，
例如：
在代碼里寫入一個(gè)a標(biāo)簽，點(diǎn)擊會(huì)跳轉(zhuǎn)到目標(biāo)鏈接網(wǎng)頁(yè)中：
<view class="example-body"> <a rel="external nofollow" rel="external nofollow" >百度</a> </view>
但如果我們不想讓它跳轉(zhuǎn)但還想使用a標(biāo)簽的話，此時(shí)就需要使用@click.prevent方法：
<view class="example-body"> <a rel="external nofollow" rel="external nofollow" @click.prevent='notLink'>百度</a> </view>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js獲取數(shù)據(jù)庫(kù)數(shù)據(jù)實(shí)例代碼
本篇文章主要介紹了vue.js獲取數(shù)據(jù)庫(kù)數(shù)據(jù)實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
daisyUI解決TailwindCSS堆砌class問題詳解
這篇文章主要為大家介紹了daisyUI解決TailwindCSS堆砌class問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue項(xiàng)目打包以及優(yōu)化的實(shí)現(xiàn)步驟
項(xiàng)目完成，我們會(huì)將項(xiàng)目進(jìn)行上線，為了提升性能，我們往往會(huì)進(jìn)行一些優(yōu)化處理，本文主要介紹了vue項(xiàng)目打包以及優(yōu)化的實(shí)現(xiàn)步驟，感興趣的可以了解一下2021-07-07
Vue項(xiàng)目查看當(dāng)前使用的elementUI版本的方法
今天小編就為大家分享一篇Vue項(xiàng)目查看當(dāng)前使用的elementUI版本的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了vue 使用print-js 打印渲染不出來問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue3使用MD5加密實(shí)戰(zhàn)案例(清晰明了)
MD5是一種信息摘要算法(對(duì)稱加密),一種被廣泛使用的密碼散列函數(shù),可以產(chǎn)生出一個(gè)128位(16字節(jié))的散列值,用來確保信息傳輸完整一致性,這篇文章主要給大家介紹了關(guān)于Vue3使用MD5加密的相關(guān)資料,需要的朋友可以參考下2023-05-05
vue如何使用moment處理時(shí)間戳轉(zhuǎn)換成日期或時(shí)間格式
這篇文章主要給大家介紹了關(guān)于vue如何使用moment處理時(shí)間戳轉(zhuǎn)換成日期或時(shí)間格式的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
vue在取對(duì)象長(zhǎng)度length時(shí)候出現(xiàn)undefined的解決
這篇文章主要介紹了vue在取對(duì)象長(zhǎng)度length時(shí)候出現(xiàn)undefined的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
今天小編就為大家?guī)硪黄猘xios取消請(qǐng)求的實(shí)踐記錄分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09