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