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
問(wèn)題：
父元素中添加了一個(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：阻止事件冒泡方法來(lái)解決這個(gè)問(wèn)題：
<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)行為，
例如：
在代碼里寫(xiě)入一個(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)簽的話(huà)，此時(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)文章
本篇文章給大家分享了vue2單元測(cè)試環(huán)境搭建的詳細(xì)步驟，對(duì)此有需要的朋友參考學(xué)習(xí)下。2018-05-05
Vue路由的模塊自動(dòng)化與統(tǒng)一加載實(shí)現(xiàn)
這篇文章主要介紹了Vue路由的模塊自動(dòng)化與統(tǒng)一加載實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要為大家詳細(xì)介紹了Vue3中引用本地圖片路徑的常用方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
vue原理Compile從新建實(shí)例到結(jié)束流程源碼
這篇文章主要為大家介紹了vue原理Compile從新建實(shí)例到結(jié)束流程源碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
說(shuō)說(shuō)Vue.js中的functional函數(shù)化組件的使用
這篇文章主要介紹了說(shuō)說(shuō)Vue.js中的functional函數(shù)化組件的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
詳解mpvue scroll-view自動(dòng)回彈bug解決方案
設(shè)置了scroll-top的scroll-view組件，在組件所在vue實(shí)例data發(fā)生改變時(shí)會(huì)自動(dòng)回彈到最上方，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
Vue.js 通過(guò)jQuery ajax獲取數(shù)據(jù)實(shí)現(xiàn)更新后重新渲染頁(yè)面的方法
今天小編小編就為大家分享一篇Vue.js 通過(guò)jQuery ajax獲取數(shù)據(jù)實(shí)現(xiàn)更新后重新渲染頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
本篇文章主要介紹了Vue2.0里過(guò)濾器容易踩到的坑，vue2.0需要自己定義過(guò)濾器。有興趣的可以了解一下2017-06-06
這篇文章主要介紹了vue組件中的數(shù)據(jù)傳遞方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-05-05
Vue 級(jí)聯(lián)下拉框的設(shè)計(jì)與實(shí)現(xiàn)
在前端開(kāi)發(fā)中，級(jí)聯(lián)選擇框是經(jīng)常用到的，這樣不僅可以增加用戶(hù)輸入的友好性，還能減少前后端交互的數(shù)據(jù)量。本文就介紹一下使用Vue實(shí)現(xiàn)級(jí)聯(lián)下拉框，感興趣的可以了解一下2021-07-07