vue函數@click.prevent的使用解析

2022-04-21 16:00:29

@click.prevent的使用

背景：vue專案操作中遇到@click.prevent函數，場景特殊（專案中有一個自己封裝的元件庫，因此所有的樣式都統一整合，遇到特殊情況想引入特殊UI風格處理時，部分元件需要樣式重調，因此用到@click.prevent）特此紀要。

@click.prevent的作用是什麼？

說明：@click.prevent屬於vue的內建函數，vue中有很多其他的函數也有很豐富的應用場景，此篇博文思慮再三，僅對@click.prevent進行闡述，有關其他的函數了解，可自行查閱相關資料。

解決方案：@click.prevent函數會阻止觸發dom的原始事件，而去執行特定的事件。

為了更好的理解@click.prevent函數，引入一個專案中的使用樣例以供參考：

<!-- 樣例 -->
  // Codding...
  <a class="img-control" v-show="true" @click.prevent="goXxxx()">修改</a>
<!-- 
    解析：
        a標籤預設有自己的href屬性，觸發a標籤後他會自動跳轉對應的連結地址或執行的函數。
        此處為了巢狀，避免調整樣式所以參照了a標籤來處理，但又為了避免a標籤的屬性限制，因此參照了@click.prevent函數阻隔預設的操作。
        （此處還想做一些延伸說明，但目前沒有太多的案例來很好的說明，後續再做更新，目前只到這裡）
 -->

vue還有幾個常用的函數，如：@keyup.enter（enter回車事件）等等。

@click.stop與@click.prevent

@click.stop

問題：父元素中新增了一個click事件，其下面的子元素中也新增了click事件，此時，我想點選子元素獲取子元素的點選事件，但卻觸發的是父元素的事件：

<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標籤，點選會跳轉到目標連結網頁中：

<view class="example-body">
    <a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow" >百度</a>
</view>

但如果我們不想讓它跳轉但還想使用a標籤的話，此時就需要使用@click.prevent方法：

<view class="example-body">
    <a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"  @click.prevent='notLink'>百度</a>
</view>

這時再點選a標籤的時候就不會跳轉目標地址連結了。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。