Vue中@click.stop与@click.prevent

Vue中@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标签的时候就不会跳转目标地址链接了。


---------------------
作者:幸福了,然后呢
来源:CSDN
原文:https://blog.csdn.net/weixin_42260975/article/details/114691422
版权声明:本文为作者原创文章,转载请附上博文链接!
内容解析By:CSDN,CNBLOG博客文章一键转载插件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/283415.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ES6 promise

如何使用promise对象? 参考连接&#xff1a; http://es6.ruanyifeng.com/#docs/promise 转载于:https://www.cnblogs.com/taoshengyijiuai/p/6963279.html

巧用ThreadPool.QueueUserWorkItem实现接口二次调用

背景最近做了个项目有个接口涉及到批量计算的问题&#xff0c;耗时比较长。大家都知道&#xff0c;接口等待时间太长肯定是不可取的。那么只能做异步处理了&#xff1b;但是问题来了这个项目没有什么消息队列、redis之类的使用&#xff0c;本着怎么简单怎么来的思路&#xff0c…

el-upload 防止选择上传重复文件

<el-uploadref"uploadRef"multipledragaction"":auto-upload"false":file-list"msgPara.MsgFileList":on-change"handleFileChanged" ><el-button type"primary">选择文件</el-button> </el…

jmete 学习--基础之名词解释

一.jmeter 体系结构 1.名词解释 元件 jmemter工具菜单中的一个子菜单&#xff0c;如http请求&#xff0c;事务控制器等&#xff0c;就是一个元件。 组件 一组元件的集合&#xff0c;比如逻辑控制器中有事务控制器&#xff0c;仅一次控制器等&#xff0c;这些都是hi元件&#x…

Testing - 软件测试知识梳理 - 自动化测试

软件开发的过程是一个持续集成和改进的过程&#xff0c;而每一次的改进都可能引进新bug,因此当软件的一部&#xff0c;或者全部修改时&#xff0c;都需要对软件产品重新进行测试。 其目的是要验证修改后的产品是符合需求的&#xff0c;而当没有自动化测试代码时&#xff0c;往往…

Virtual script not found, may missing <script lang=“ts“> / “allowJs“: true / jsconfig.json.volar

解决办法&#xff1a; 在 jsconfig.json 配置文件中设置 "allowJs": true 如果没有jsconfig.json文件&#xff0c;直接在项目要目录创建一个&#xff0c;添加如下配置内容即可&#xff1a; /** Title: This is a file for ……* Author: JackieZheng* Date: 2022…

协鑫集成“熄灯工厂”装上ET工业大脑,验证订单命中率可提高3.99%

4月26日的云栖大会南京峰会&#xff0c;协鑫集成宣布&#xff0c;与阿里云ET工业大脑合作后&#xff0c;通过人工智能验证的订单命中率可提高3.99%。 协鑫集成是全球一线组件制造商&#xff0c;积极致力于推进自主创新与智能制造&#xff0c;综合运用信息通讯、物联网、大数据决…

pip install mysql-connector 安装出错

一、MySQL Connector/Python 2.2.3 的变化&#xff1a; 之前 mysql 官方说MySQL Connector/Python 是纯python语言写的&#xff0c;但是呢&#xff01; 这个问题在2.2.3中变天了&#xff1b; 以下是MySQL Connector/Python 2.2.3 是变更记录 Changes in MySQL Connector/Python…

2022世界传感器大会 | 龙芯中科发布龙芯2K0500多功能SoC芯片及解决方案

8月21日&#xff0c;由工业和信息化部、中国科学技术协会、河南省人民政府共同主办的2022世界传感器大会在郑州开幕&#xff0c;众多诺奖、图灵奖获得者、海内外院士和专家学者出席&#xff0c;全球传感器领域最具影响力的相关企业参加。龙芯中科董事长胡伟武在大会开幕式发表主…

Vue3 配置config文件,打包后随意修改配置,无需重新打包和重启

在public目录创建config.json文件&#xff0c;名字随便起。 {"AppVersion": "1.0","AppTitle": "这里是程序名称" } 修改AppTitle&#xff1a; {"AppVersion": "1.0","AppTitle": "这里是修改后的…

TypeError: pyqtSignal must be bound to a QObject

super(MyQObject, self).__init__() #如果写了__init__()函数&#xff0c;这一行一定要有&#xff0c;否则会出现 #TypeError: pyqtSignal must be bound to a QObject, not MyQObject转载于:https://www.cnblogs.com/CGAlpha/p/6971527.html

Jmeter-3.0的源码导入eclipse并执行

最近在研究jmeter二次开发&#xff0c;所以需要先jmeter导入Eclipse&#xff0c;后续还需要学习jmeter源码以及二次开发的相关知识&#xff0c;到时候也会分享出来&#xff0c;下面是jmeter导入Eclipse的过程首先去官网下载apache-jmeter-3.0的源码包和release包&#xff08;二…

在Vue3中使用Element Plus Icon图标的几种方式

安装 Element Plus $ npm install element-plus/icons在main.js 引入 import * as ElIcon from element-plus/icons-vueObject.keys(ElIcon).forEach((key) > {app.component(key, ElIcon[key]) }) 方式一&#xff1a;通过 icon"el-icon-plus" 使用 <!-- …

Qt 打印机操作

2019独角兽企业重金招聘Python工程师标准>>> 配置文件加入打印机支持&#xff1a; QT printsupport 1、打印图片 打印图片所需头文件&#xff1a; #include <QPixmap> #include <QPrinter> #include <QPainter> 打印图片代码&#xff1a; QStrin…

centOS7 安装mysql 设置远程访问

CentOS 7的yum源中貌似没有正常安装mysql时的mysql-sever文件&#xff0c;需要去官网上下载 # wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm# rpm -ivh mysql-community-release-el7-5.noarch.rpm# yum install mysql-community-server成功安装之后…

spark集群详细搭建过程及遇到的问题解决(四)

在spark集群详细搭建过程及遇到的问题解决&#xff08;三&#xff09;中&#xff0c;我们将讲述了hadoop的安装过程&#xff0c;在本文中将主要讲述spark的安装配置过程。sparkmaster:~/spark$ cd hadoop sparkmaster:~/spark/hadoop$ cd $SPARK_HOME/conf sparkmaster:~/spark…

k8s 读书笔记 - 深入掌握 Pod

什么是 PodPod 是可以在 Kubernetes 中创建和管理的、最小的可部署的计算单元。在同一个 context 下&#xff0c;应用可能还会有独立的 cgroup 隔离机制&#xff0c;一个 Pod 是一个容器环境下的 “逻辑主机”。Pod 是一组容器单元&#xff0c; 这些容器共享存储、网络、以及怎…

Net core 报 Could not load file or assembly ‘System.Security.Permissions 错误

完整错误提示 System.IO.FileNotFoundException:“Could not load file or assembly System.Security.Permissions, Version4.0.3.0, Cultureneutral, PublicKeyTokencc7b13ffcd2ddd51. 系统找不到指定的文件。” 控制台 错误提示&#xff1a; 根据提示可知&#xff1a;这是由…

“芯”痛痛在系统与芯片 转型升级是历史趋势

2019独角兽企业重金招聘Python工程师标准>>> 4月23号&#xff0c;中共中央政治局召开会议&#xff0c;分析研究当前一系列经济工作形势&#xff0c;并且强调完成今年的目标任务&#xff0c;需要付出艰苦努力&#xff0c;关键是要同高质量发展的要求对表&#xff0c;…

如何让Vuex刷新页面数据不丢失?实现方法和原理 vuex-persistedstate 和 vuex-persist的使用

如题&#xff1a;由于vue自身特性的原因&#xff0c;vuex中的数据在页面刷新之后其中的数据会初始化&#xff0c;这就导致组件之间通过vuex传递的数据在用户f5刷新页面之后会丢失 页面刷新后&#xff0c;想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和l…