vue函數(shù)@click.prevent的使用解析
@click.prevent的使用
背景 ：vue項(xiàng)目操作中遇到@click.prevent函數(shù)，場景特殊（項(xiàng)目中有一個(gè)自己封裝的組件庫，因此所有的樣式都統(tǒng)一集成，遇到特殊情況想引入特殊UI風(fēng)格處理時(shí)，部分組件需要樣式重調(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ù)會(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)對應(yīng)的鏈接地址或執(zhí)行的函數(shù)。 ? ? ? ? 此處為了嵌套，避免調(diào)整樣式所以引用了a標(biāo)簽來處理，但又為了避免a標(biāo)簽的屬性限制，因此引用了@click.prevent函數(shù)阻隔默認(rèn)的操作。 ? ? ? ? （此處還想做一些延伸說明，但目前沒有太多的案例來很好的說明，后續(xù)再做更新，目前只到這里） ?-->
vue還有幾個(gè)常用的函數(shù)，如：@keyup.enter（enter回車事件）等等。
@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('評論')"><text class="footer-box__item">評論</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('評論')"><text class="footer-box__item">評論</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)頁中：
<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)文章
這篇文章主要介紹了在vue中配置不同的代理同時(shí)訪問不同的后臺操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
在本篇文章里我們給大家分享了關(guān)于vue的v-if使用方法的相關(guān)知識點(diǎn)，有興趣的朋友們跟著學(xué)習(xí)下。2019-02-02
這篇文章主要介紹了Vue搭建后臺系統(tǒng)需要做的幾點(diǎn)，文中給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了Vue中原生template標(biāo)簽失效如何解決，找了整一天也沒找著這事件為什么觸發(fā)不了，第二天意識到原生代碼里的template可能有問題，在原生環(huán)境中template標(biāo)簽內(nèi)部的東西是不會(huì)渲染出來的，雖然解析器在加載頁面的時(shí)候確實(shí)會(huì)處理這部分代碼片段2023-02-02
vue中el-table實(shí)現(xiàn)穿梭框(數(shù)據(jù)可以上移下移)
本文主要介紹了vue中el-table實(shí)現(xiàn)穿梭框(數(shù)據(jù)可以上移下移)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
vue element-ui里的table中表頭與表格出現(xiàn)錯(cuò)位的解決
這篇文章主要介紹了vue element-ui里的table中表頭與表格出現(xiàn)錯(cuò)位的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Nuxt使用Vuex的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue3 Teleport瞬間移動(dòng)函數(shù)使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue3 Teleport瞬間移動(dòng)函數(shù)使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
vue-router二級導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue-router二級導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03