vue函數@click.prevent怎么使用

這篇文章主要介紹“vue函數@click.prevent怎么使用”，在日常操作中，相信很多人在vue函數@click.prevent怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue函數@click.prevent怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

@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標簽的時候就不會跳轉目標地址鏈接了。 

到此，關于“vue函數@click.prevent怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！