当前位置: 首页 > news >正文

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>

相关文章:

Vue中@click.stop与@click.prevent

Vue中click.stop与click.prevent 一、click.stop 问题&#xff1a;父元素中添加了一个click事件&#xff0c;其下面的子元素中也添加了click事件&#xff0c;此时&#xff0c;我想点击子元素获取子元素的点击事件&#xff0c;但却触发的是父元素的事件&#xff1a; <view …...

沐风老师3DMax对象随机颜色插件使用方法

3DMax对象随机颜色插件使用教程 3DMax对象颜色插件,是一个功能强大的脚本,它通过提供高级工具来操纵场景中的对象颜色、材质和实例,从而增强了3D设计师和艺术家的工作流程。这个多功能脚本提供了一系列功能,旨在简化对象、组和实例的着色过程。 3DMAX对象颜色插件主要具有…...

安卓将子模块打aar包,并将其远程依赖打包进去

生成 AAR 包 在Android Studio Terminal 窗口输入以下命令&#xff1a; ./gradlew :monitor:assembleRelease把 monitor 换成你子模块的名称&#xff0c;不出意外的话 就会在下面目录生成相应aar文件 注意&#xff1a;如果你的Java运行环境是Java 8 则在老一点的AS上 可以运…...

python 提取视频中的音频 采用ffmpeg-python 库

要使用 ffmpeg-python 库从视频文件中提取音频&#xff0c;首先需要确保你的系统中已经安装了 FFmpeg 和 ffmpeg-python 库。以下是详细的步骤&#xff1a; 步骤 1: 安装 FFmpeg 确保你的系统中已经安装了 FFmpeg。如果你使用的是 CentOS&#xff0c;可以参照前面的回答来安装 …...

区块链的搭建和运维4

区块链的搭建和运维4 (1) 搭建基于MySQL分布式存储的区块链 1.构建单群组网络节点 使用开发部署工具构建单群组网络节点&#xff0c;命令如下&#xff1a; bash build_chain.sh -l 127.0.0.1:4 -p 30300,20200,85452. 启动 MySQL 并设置账户密码 输入如下命令&#xff0c;…...

数据驱动决策:内容数据产品经理的成长与价值

数据驱动决策&#xff1a;内容数据产品经理的成长与价值 内容数据产品经理以数据为媒介&#xff0c;在用户与决策之间搭建桥梁&#xff0c;通过理解分析模型和用户决策路径&#xff0c;设计产品以促成更多决策产出&#xff0c;创造用户价值。例如&#xff0c;在衡量数据产品经理…...

pyinstaller 打包python 提示 object has no attribute

参考&#xff1a; 错误&#xff1a;gi.repository.BlockDev’ object has no attribute plugin_specs_from_names 查看包路径 rpm -ql python3-blockdev/usr/lib64/python3.7/site-packages/gi/overrides/BlockDev.py /usr/lib64/python3.7/site-packages/gi/overrides/__pyca…...

ubuntu20.04搭建RUST开发环境并与C语言交互

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 ubuntu20.04搭建RUST开发环境并与C语言交互 前言开战一、确认环境版本二、环境搭建三、hello world&#xff01;四、跟c语言进行交互1.rust调用C静态库2.C调用rust库 总结参考…...

C语言 ——— 学习、使用memmove函数 并模拟实现

目录 memmvoe函数的功能 学习memmove函数​编辑 模拟实现memmove函数 memmvoe函数的功能 memmvoe函数的功能类似于memcpy函数&#xff0c;都是内存拷贝&#xff0c;唯一的区别是memcpy函数不能成功拷贝原数据&#xff0c;而memmvoe函数可以 举例来说&#xff1a; [1, 2, 3…...

职场中必须明白的三个道理,不明白无出头之日,你越早知道越好

职场中有很多优秀的人才&#xff0c;他们工作能力出众&#xff0c;为人处事也非常的善良&#xff0c;但是有时候&#xff0c;这样的优点反而成了他们在职场中被欺负的原因&#xff0c;因为他们太善良&#xff0c;很容易被别人利用&#xff0c;为了自己的利益&#xff0c;有些人…...

做webserver项目的一些问题和思路总结

1.webserver是做什么的&#xff1f;这个项目最后想实现什么&#xff1f; 网络服务器&#xff0c;是一个处理HTTP请求并返回HTTP响应的程序。&#xff08;socket实现的是网络编程&#xff0c;不一定是HTTP&#xff0c;还有其他协议&#xff0c;具体协议由端口来确定&#xff09…...

大数据-70 Kafka 高级特性 物理存储 日志存储 日志清理: 日志删除与日志压缩

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…...

基于S7-200 SMART实现PID控制仿真实验

关键字&#xff1a;Matalb&#xff1b;S7-200 SMART&#xff1b;Modbus TCP&#xff1b;PID控制 系列文章目录 基于S7-200 SMART实现一键启停 顺序功能图——&#xff08;二&#xff09;设计机组延时关机程序 基于S7-200 SMART实现Modbus TCP通信 基于S7-200 SMART实现MATLAB写…...

社交及时通讯平台完整版源码,uniapp技术,可打包成app

源码简介&#xff1a; 全原生&#xff0c;从底层开始结构就完全不一样&#xff0c;mongodb的库&#xff0c;uniapp混编手端&#xff0c;二开难度要比视酷或者酷信容易很多。全开源&#xff0c;带开发文档。前端用的是uniapp技术&#xff0c;所以是多端合一&#xff0c;可以做h…...

TensorFlow和Pytorch是什么?干什么用的?

TensorFlow和Pytorch都是机器学习框架&#xff0c;允许用户自定义开发机器学习模型&#xff08;利用已经实现好的神经网络层&#xff09;。 1. 加载和预处理数据 加载数据&#xff1a;使用合适的库&#xff08;如 Pandas、Numpy 或 TensorFlow 的数据处理 API&#xff09;从文…...

采购人可否自行选择采购方式?|数智化招采系统支持多种采购方式

采购人是否有权自行确定采购方式&#xff0c;主要取决于采购项目的性质和规模&#xff0c;特别是是否达到公开招标的数额标准。 一、达到公开招标数额标准以上的项目 《中华人民共和国政府采购法实施条例》第二十三条规定&#xff1a;“采购人采购公开招标数额标准以上的货物…...

ubuntu dde 改为中文

在 Ubuntu Deepin Desktop Environment (DDE) 中&#xff0c;如果已经将系统语言设置为中文&#xff0c;但系统菜单仍然显示英文&#xff0c;可以尝试以下步骤解决&#xff1a; 检查语言设置&#xff1a;确保你的系统语言已经正确设置为中文。你可以在“系统设置”->“区域和…...

Nginx配置小细节,location和proxy_pass 斜杠/ 问题

理解nginx的配置有助于理解前后端调用的过程&#xff0c;这里是location与proxy_pass需要注意的点 location 不带斜杠 的是模糊匹配&#xff0c;例如 location /abc 可以匹配 /abc/index.html&#xff0c;也可以匹配 /abcd/index.html location 带斜杠的是固定匹配&#xff0c…...

java 解析 PDF OFD 发票 部分文字缺失

1、pdfbox https://mvnrepository.com/artifact/org.apache.pdfbox/pdfbox 到这里用最新的版本 最近碰到发票各式各样&#xff0c;千奇百怪&#xff1a;记录其中一个 解析出来是&#xff1a;缺少一个通字 发票好几处都缺少文字&#xff0c;解析出来的是 一个 圆点 原因&…...

C/C++数字与字符串互相转换

前言&#xff1a; 在C/C程序中&#xff0c;会需要把数字与字符串做出互相转换的操作&#xff0c;用于实现程序想要的效果。下面将介绍多种方法实现数字与字符串互相转换。 字符串转为数字 一、利用ASCII 我们知道每个字符都有一个ASCII码&#xff0c;利用这一点可以将字符-0…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...