vue函數(shù)@click.prevent的使用解析
@click.prevent的使用
背景 ：vue項目操作中遇到@click.prevent函數(shù)，場景特殊（項目中有一個自己封裝的組件庫，因此所有的樣式都統(tǒng)一集成，遇到特殊情況想引入特殊UI風(fēng)格處理時，部分組件需要樣式重調(diào)，因此用到@click.prevent）特此紀(jì)要。
@click.prevent的作用是什么？
說明：@click.prevent屬于vue的內(nèi)置函數(shù)，vue中有很多其他的函數(shù)也有很豐富的應(yīng)用場景，此篇博文思慮再三，僅對@click.prevent進(jìn)行闡述，有關(guān)其他的函數(shù)了解，可自行查閱相關(guān)資料。
解決方案：@click.prevent函數(shù)會阻止觸發(fā)dom的原始事件，而去執(zhí)行特定的事件。
為了更好的理解@click.prevent函數(shù)，引入一個項目中的使用樣例以供參考：
<!-- 樣例 --> ? // Codding... ? <a class="img-control" v-show="true" @click.prevent="goXxxx()">修改</a> <!--? ? ? 解析： ? ? ? ? a標(biāo)簽?zāi)J(rèn)有自己的href屬性，觸發(fā)a標(biāo)簽后他會自動跳轉(zhuǎn)對應(yīng)的鏈接地址或執(zhí)行的函數(shù)。 ? ? ? ? 此處為了嵌套，避免調(diào)整樣式所以引用了a標(biāo)簽來處理，但又為了避免a標(biāo)簽的屬性限制，因此引用了@click.prevent函數(shù)阻隔默認(rèn)的操作。 ? ? ? ? （此處還想做一些延伸說明，但目前沒有太多的案例來很好的說明，后續(xù)再做更新，目前只到這里） ?-->
vue還有幾個常用的函數(shù)，如：@keyup.enter（enter回車事件）等等。
@click.stop與@click.prevent
@click.stop
問題：父元素中添加了一個click事件，其下面的子元素中也添加了click事件，此時，我想點(diǎn)擊子元素獲取子元素的點(diǎn)擊事件，但卻觸發(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)簽，點(diǎn)擊會跳轉(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>
這時再點(diǎn)擊a標(biāo)簽的時候就不會跳轉(zhuǎn)目標(biāo)地址鏈接了。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue+Flask實(shí)現(xiàn)圖片傳輸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue腳手架（vue-cli）搭建項目，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue輪播圖組件的封裝可通過封裝組件、使用插件、配置化等方式實(shí)現(xiàn)，主要包括圖片預(yù)加載、定時輪播、無限滾動、手勢滑動、響應(yīng)式布局等功能，實(shí)現(xiàn)方式可使用Vue的生命周期函數(shù)、自定義事件、計算屬性等技術(shù)2023-04-04
今天小編就為大家分享一篇Element UI 自定義正則表達(dá)式驗證方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定方式
這篇文章主要介紹了vue單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作
這篇文章主要介紹了vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue打包部署到Nginx時,css樣式不生效的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
詳解VScode編輯器vue環(huán)境搭建所遇問題解決方案
這篇文章主要介紹了VScode編輯器vue環(huán)境搭建所遇問題解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在本篇文章里小編給大家整理了關(guān)于vue中axios的二次封裝實(shí)例以及相關(guān)知識點(diǎn)總結(jié)，需要的朋友們可以學(xué)習(xí)下。2019-10-10
Vue?Router路由hash模式與history模式詳細(xì)介紹
Vue?Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。路由實(shí)際上就是可以理解為指向，就是我在頁面上點(diǎn)擊一個按鈕需要跳轉(zhuǎn)到對應(yīng)的頁面，這就是路由跳轉(zhuǎn)2022-08-08