vue中關(guān)于click.stop的用法
關(guān)于click.stop的用法
click.stop 阻止點(diǎn)擊事件繼續(xù)傳播
場景：
在table中使用，點(diǎn)擊當(dāng)前行，當(dāng)前行被勾選，但是點(diǎn)擊當(dāng)前行中按鈕或點(diǎn)擊事件時(shí)，使用此方法，則在觸發(fā)當(dāng)前點(diǎn)擊事件后，阻止行的選中事件
使用：
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
問題：父元素中添加了一個(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：阻止事件冒泡方法來解決這個(gè)問題：
<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)頁中：
<view class="example-body"> ?? ?<a >百度</a> </view>
但如果我們不想讓它跳轉(zhuǎn)但還想使用a標(biāo)簽的話，此時(shí)就需要使用@click.prevent方法：
<view class="example-body"> ?? ?<a @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í)現(xiàn)table表格里面數(shù)組多層嵌套取值
這篇文章主要介紹了vue實(shí)現(xiàn)table表格里面數(shù)組多層嵌套取值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue項(xiàng)目接入Paypal實(shí)現(xiàn)示例詳解
這篇文章主要介紹了Vue項(xiàng)目接入Paypal實(shí)現(xiàn)示例詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了vue如何重置data、組件中的data為什么是一個(gè)函數(shù)、為什么new Vue里的data可以是一個(gè)對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue.js2.0點(diǎn)擊獲取自己的屬性和jquery方法
下面小編就為大家分享一篇vue.js2.0點(diǎn)擊獲取自己的屬性和jquery方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vuex是一個(gè)專門為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。這篇文章主要介紹了全站最詳細(xì)的Vuex教程,需要的朋友可以參考下2018-04-04
antd vue 刷新保留當(dāng)前頁面路由,保留選中菜單,保留menu選中操作
這篇文章主要介紹了antd vue 刷新保留當(dāng)前頁面路由,保留選中菜單,保留menu選中操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家學(xué)習(xí)介紹了Vue3如何使用echarts實(shí)現(xiàn)繪制儀表盤，文中的示例代碼積極學(xué)習(xí)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-07-07
本文主要介紹了VUE3之Non-Props屬性的具體使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
今天小編就為大家分享一篇淺談vue中組件綁定事件時(shí)是否加.native，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue.js+HighCharts實(shí)現(xiàn)動(dòng)態(tài)請(qǐng)求展示時(shí)序數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了Vue.js+HighCharts實(shí)現(xiàn)動(dòng)態(tài)請(qǐng)求展示時(shí)序數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03