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