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)擊事件時，使用此方法，則在觸發(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
問題：父元素中添加了一個click事件，其下面的子元素中也添加了click事件，此時，我想點(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>此時，我們就需要使用@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：阻止事件的默認(rèn)行為，例如：在代碼里寫入一個a標(biāo)簽，點(diǎn)擊會跳轉(zhuǎn)到目標(biāo)鏈接網(wǎng)頁中：
<view class="example-body"> ?? ?<a >百度</a> </view>
但如果我們不想讓它跳轉(zhuǎn)但還想使用a標(biāo)簽的話，此時就需要使用@click.prevent方法：
<view class="example-body"> ?? ?<a @click.prevent='notLink'>百度</a> </view>
這時再點(diǎn)擊a標(biāo)簽的時候就不會跳轉(zhuǎn)目標(biāo)地址鏈接了。
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
手寫實(shí)現(xiàn)vue2下拉菜單dropdown組件實(shí)例
這篇文章主要為大家介紹了手寫vue2下拉菜單dropdown組件實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
本文講解了如何在Linux環(huán)境中部署Vue項(xiàng)目,包括安裝依賴、編譯項(xiàng)目、安裝配置Nginx,并介紹了SSL證書安裝與配置,詳細(xì)說明了使用Nginx作為靜態(tài)資源服務(wù)器和反向代理的步驟,以及進(jìn)行性能、安全性測試和備份的重要性,需要的朋友可以參考下2024-09-09
Vue使用el-table實(shí)現(xiàn)表格跨頁多選
在我們?nèi)粘ｍ?xiàng)目開發(fā)中,經(jīng)常會有表格跨頁多選的需求,接下來讓我們用?el-table示例一步步來實(shí)現(xiàn)這個需求,文中有詳細(xì)的代碼講解,對我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-08-08
在本篇文章里小編給大家分享的是關(guān)于vuex入門最詳細(xì)整理的相關(guān)內(nèi)容，需要的朋友們參考下。2020-03-03
Vue3整合WangEditor富文本編輯器的實(shí)踐指南
這篇文章主要為大家詳細(xì)介紹了如何在?Vue?3?項(xiàng)目中集成?WangEditor?富文本編輯器,實(shí)現(xiàn)圖文混排、自定義擴(kuò)展等高階功能,感興趣的小伙伴可以了解下2025-03-03
這篇文章主要介紹了基于VUE的v-charts的曲線顯示功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-10
vue從零實(shí)現(xiàn)一個消息通知組件的方法詳解
這篇文章主要介紹了vue從零實(shí)現(xiàn)一個消息通知組件的方法,結(jié)合實(shí)例形式分析了vue實(shí)現(xiàn)消息通知組件的具體原理、實(shí)現(xiàn)步驟、與相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
vue3?element-plus實(shí)現(xiàn)圖片預(yù)覽功能實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3?element-plus實(shí)現(xiàn)圖片預(yù)覽功能的相關(guān)資料,在項(xiàng)目中我們經(jīng)常會碰到圖片預(yù)覽的功能需求,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
vue打開新窗口并實(shí)現(xiàn)傳參的圖文實(shí)例
這篇文章主要給大家介紹了關(guān)于vue打開新窗口并實(shí)現(xiàn)傳參的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue.js實(shí)現(xiàn)watch屬性的示例詳解
本文討論了watch函數(shù)是如何利用副作用函數(shù)和options進(jìn)行封裝實(shí)現(xiàn)的，也通過調(diào)度函數(shù)去控制回調(diào)函數(shù)的立即執(zhí)行和執(zhí)行時機(jī)，還可以解決競態(tài)問題，感興趣的可以了解一下2022-04-04