vue中关于click.stop的用法

更新时间：2022年10月13日 16:57:28 作者：woodFan先生

这篇文章主要介绍了vue中关于click.stop的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

关于click.stop的用法

click.stop 阻止点击事件继续传播

场景：

在table中使用，点击当前行，当前行被勾选，但是点击当前行中按钮或点击事件时，使用此方法，则在触发当前点击事件后，阻止行的选中事件

使用：

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事件，此时，我想点击子元素获取子元素的点击事件，但却触发的是父元素的事件：

<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">百度</a>
</view>

但如果我们不想让它跳转但还想使用a标签的话，此时就需要使用@click.prevent方法：

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

这时再点击a标签的时候就不会跳转目标地址链接了。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

手写实现vue2下拉菜单dropdown组件实例
这篇文章主要为大家介绍了手写vue2下拉菜单dropdown组件实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
Nginx部署前端vue项目的全部步骤记录
本文讲解了如何在Linux环境中部署Vue项目,包括安装依赖、编译项目、安装配置Nginx,并介绍了SSL证书安装与配置,详细说明了使用Nginx作为静态资源服务器和反向代理的步骤,以及进行性能、安全性测试和备份的重要性,需要的朋友可以参考下
2024-09-09
Vue使用el-table实现表格跨页多选
在我们日常项目开发中,经常会有表格跨页多选的需求,接下来让我们用 el-table示例一步步来实现这个需求,文中有详细的代码讲解,对我们的学习或工作有一定的帮助,需要的朋友可以参考下
2023-08-08
vuex入门最详细整理
在本篇文章里小编给大家分享的是关于vuex入门最详细整理的相关内容，需要的朋友们参考下。
2020-03-03
Vue3整合WangEditor富文本编辑器的实践指南
这篇文章主要为大家详细介绍了如何在 Vue 3 项目中集成 WangEditor 富文本编辑器,实现图文混排、自定义扩展等高阶功能,感兴趣的小伙伴可以了解下
2025-03-03
基于VUE的v-charts的曲线显示功能
这篇文章主要介绍了基于VUE的v-charts的曲线显示功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-10-10
vue从零实现一个消息通知组件的方法详解
这篇文章主要介绍了vue从零实现一个消息通知组件的方法,结合实例形式分析了vue实现消息通知组件的具体原理、实现步骤、与相关操作技巧,需要的朋友可以参考下
2020-03-03
vue3 element-plus实现图片预览功能实例
这篇文章主要给大家介绍了关于vue3 element-plus实现图片预览功能的相关资料,在项目中我们经常会碰到图片预览的功能需求,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-09-09
vue打开新窗口并实现传参的图文实例
这篇文章主要给大家介绍了关于vue打开新窗口并实现传参的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
Vue.js实现watch属性的示例详解
本文讨论了watch函数是如何利用副作用函数和options进行封装实现的，也通过调度函数去控制回调函数的立即执行和执行时机，还可以解决竞态问题，感兴趣的可以了解一下
2022-04-04