vue中關(guān)于click.stop的用法
更新時間：2022年10月13日 16:57:28 作者：woodFan先生
這篇文章主要介紹了vue中關(guān)于click.stop的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
關(guān)于click.stop的用法
click.stop 阻止點擊事件繼續(xù)傳播
場景：
在table中使用，點擊當前行，當前行被勾選，但是點擊當前行中按鈕或點擊事件時，使用此方法，則在觸發(fā)當前點擊事件后，阻止行的選中事件
使用：
html
<el-table ref="tableRef" :data="tableData" :row-key="row => { return row.id}" @selection-change="handleSelectionChange">
<el-table-column
width="50"
align="center"
type="selection">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
v-hasFSS="'rkcjgl-table-caoZuoJiLu'"
icon="el-icon-stopwatch"
type="text"
style="padding:0;"
@click.stop="openCzjl(scope.row)"
>操作記錄</el-button>
</template>
</el-table-column>
</el-table>頁面效果：
@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標簽，點擊會跳轉(zhuǎn)到目標鏈接網(wǎng)頁中：
<view class="example-body"> ?? ?<a >百度</a> </view>
但如果我們不想讓它跳轉(zhuǎn)但還想使用a標簽的話，此時就需要使用@click.prevent方法：
<view class="example-body"> ?? ?<a @click.prevent='notLink'>百度</a> </view>
這時再點擊a標簽的時候就不會跳轉(zhuǎn)目標地址鏈接了。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)table表格里面數(shù)組多層嵌套取值
這篇文章主要介紹了vue實現(xiàn)table表格里面數(shù)組多層嵌套取值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue項目接入Paypal實現(xiàn)示例詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要介紹了vue如何重置data、組件中的data為什么是一個函數(shù)、為什么new Vue里的data可以是一個對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
下面小編就為大家分享一篇vue.js2.0點擊獲取自己的屬性和jquery方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vuex是一個專門為vue.js設(shè)計的集中式狀態(tài)管理架構(gòu)。這篇文章主要介紹了全站最詳細的Vuex教程,需要的朋友可以參考下2018-04-04
antd vue 刷新保留當前頁面路由,保留選中菜單,保留menu選中操作
這篇文章主要介紹了antd vue 刷新保留當前頁面路由,保留選中菜單,保留menu選中操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家學習介紹了Vue3如何使用echarts實現(xiàn)繪制儀表盤，文中的示例代碼積極學習，感興趣的小伙伴可以跟隨小編一起學習一下2023-07-07
本文主要介紹了VUE3之Non-Props屬性的具體使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
今天小編就為大家分享一篇淺談vue中組件綁定事件時是否加.native，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue.js+HighCharts實現(xiàn)動態(tài)請求展示時序數(shù)據(jù)
這篇文章主要為大家詳細介紹了Vue.js+HighCharts實現(xiàn)動態(tài)請求展示時序數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03