Vue——事件修饰符
文章目录
- 前言
- 阻止默认事件 prevent
- 阻止事件冒泡 stop
前言
在官方文档中对于事件修饰符有一个很好的说明,本篇文章主要记录验证测试的案例。
官方文档 事件修饰符
阻止默认事件 prevent
在js原生的语言中,可以根据标签本身的事件对象进行阻止默认事件操作,如下所示:
<template><h1>阻止默认事件</h1><a @click="clickTest1" href="https://writing-bugs.blog.csdn.net/">专注写bug csdn</a>
</template>
<script>
export default{data(){return{}},methods:{clickTest1(e){// js 原生 事件对象 方法 实现阻止默认事件e.preventDefault();console.log("点击了!");}}
}
</script>
<a>标签,增加href属性后,浏览器点击当前连接即可进行跳转操作,若只想点击后触发日志打印或其他操作,但不想跳转,则可以采取e.preventDefault() 进行默认事件的阻止。

Vue中有更加简单的实现方式,只需要在对应v-on绑定的click方法后增加对应的标识即可。如:@click.prevent="xxx"。
<template><h1>阻止默认事件</h1><a @click="clickTest1" href="https://writing-bugs.blog.csdn.net/">专注写bug csdn</a><br><hr><a @click.prevent="clickTest2" href="https://writing-bugs.blog.csdn.net/">专注写bug csdn</a>
</template>
<script>
export default{data(){return{}},methods:{clickTest1(e){e.preventDefault();console.log("点击了!");},clickTest2(){console.log("点击了2!");}}
}
</script>

阻止事件冒泡 stop
触发子级元素的事件的同时,也触发了父级元素的事件。
冒泡通常出现在嵌套中,比如div有个点击事件,其内有个其他的标签,也有一个点击事件。如下所示。
<template><h1>阻止事件冒泡</h1><div @click="clickDiv"><p @click="clickP">666666</p></div>
</template>
<script>
export default{data(){return{}},methods:{clickDiv(e){console.log("点击了 div!");},clickP(){console.log("点击了 p!");}}
}
</script>
当点击对应的p标签的文字后,控制台中将打印如下的信息。

如何想要只触发p标签的点击事件,但不想触发外层的其他点击事件,这种如何实现呢?
在js原生语法中,可以采取
e.stopPropagation()进行事件冒泡的阻止操作。
比如:
<template><h1>阻止事件冒泡</h1><div @click="clickDiv"><p @click="clickP">666666</p></div>
</template>
<script>
export default{data(){return{}},methods:{clickDiv(e){console.log("点击了 div!");},clickP(e){// js 原生阻止事件 冒泡e.stopPropagation();console.log("点击了 p!");}}
}
</script>

在vue中有一个更为简单的方式实现,直接在对应事件后增加.stop标识。
<template><h1>阻止事件冒泡</h1><div @click="clickDiv"><p @click.stop="clickP">666666</p></div>
</template>
<script>
export default{data(){return{}},methods:{clickDiv(e){console.log("点击了 div!");},clickP(e){// js 原生阻止事件 冒泡//e.stopPropagation();console.log("点击了 p!");}}
}
</script>
相关文章:
Vue——事件修饰符
文章目录 前言阻止默认事件 prevent阻止事件冒泡 stop 前言 在官方文档中对于事件修饰符有一个很好的说明,本篇文章主要记录验证测试的案例。 官方文档 事件修饰符 阻止默认事件 prevent 在js原生的语言中,可以根据标签本身的事件对象进行阻止默认事件…...
Go语言GoFly框架快速新增接口/上手写代码
拿到一个新框架大家可能无从下手,因为你对框架设计思路、结构不了解,从而产生恐惧,所以我们框架是通过简单可视化界面安装,安装后即可看到效果,然后点击先点点看各个功能,看现有的功能是怎么写的࿰…...
【Vue】v-else 和 v-else-if
作用:辅助v-if进行判断渲染 语法: v-else v-else-if"表达式"PS:需要紧接着v-if使用 示例代码: <body><div id"app"><p v-if"gender 1">性别:♂ 男</p><…...
一致性hash算法原理图和负载均衡原理-urlhash与least_conn案例
一. 一致性hash算法原理图 4台服务器计算hash值图解 减少一台服务3台服务器计算hash值图解 增加一台服务器5台服务器计算hash值图解 二. 负载均衡原理-urlhash与least_conn 2.1.urlhash案例 # urlhash upstream tomcats {hash $requ...
MySQL建库
删除数据库 新建数据库 右键-新建数据库 字符集选中utf8(支持中文) 修改字符集 右键--数据库的属性 将字符集支持的数量变少可以修改...
系统资源监控器工具glances的使用详解
目录 1、glances工具介绍 2、安装方式 3、glances的工具界面说明 4、常用的参数选项 5、常用快捷键说明 1、glances工具介绍 glances可以分析系统的 CPU使用率、内存使用率、内核统计信息和运行队列信息磁盘I/O速度、传输和读/写比率、磁盘适配器网络I/O速度、传输和读/写…...
JDBC使用QreryRunner简化SQL查询注意事项
QreryRunner是Dbutils的核心类之一,它显著的简化了SQL查询,并与ResultSetHandler协同工作将使编码量大为减少。 注意事项 1. 使用QreryRunner必须保证实体类的变量名,和sql语句中要查找的字段名必须相同,否则查询 不到数据,会出…...
前缀和(下)
目录 热身: 寻找数组的中心下标 题解: 代码: 进阶: 除自身之外数组的乘积 题解: 代码: 和为K的子数组 题解: 代码: 和可被 K 整除的子数组 题解: 同余定理…...
【排序算法】希尔排序
前言:学习希尔排序前最好先掌握插入排序,在进行;不会的可以点击——>【排序算法】插入排序-CSDN博客 一、希尔排序: 希尔排序,也称为缩小增量排序,是一种基于插入排序的快速改进算法。由Donald Shell于1…...
数学建模--LaTex插入表格详细介绍
目录 1.插入普通的边线表格 3.三线表的插入和空格说明 3.基于复杂情况下表格的插入 1.插入普通的边线表格 (1)像这个右边的生成的这个比较普通的表格,我们是使用下面的代码实现的: (2)和插入一个一个图片…...
未来已来:Flutter引领的安卓与跨平台开发奇幻之旅
引言 随着移动开发技术的飞速发展,跨平台开发框架如Flutter正逐渐改变着传统的安卓和iOS开发格局。作为一名资深的安卓开发工程师,我深刻感受到了Flutter带来的变革和机遇。今天,我想与大家分享Flutter在跨平台开发中的奇幻之旅,…...
如何将Windows PC变成Wi-Fi热点?这里提供详细步骤
序言 Windows 10和Windows 11都有内置功能,可以将你的笔记本电脑(或台式机)变成无线热点,允许其他设备连接到它并共享你的互联网连接。以下是操作指南。 由于Windows中隐藏的虚拟Wi-Fi适配器功能,你甚至可以在连接到另一个Wi-Fi网络或无线路由器时创建Wi-Fi热点,通过另…...
报错:Cannot invoke “springfox.documentation.service.ParameterType.getIn()“
文章目录 前言一、报错分析二、解决办法修改代码 总结 前言 遇到报错:Cannot invoke "springfox.documentation.service.ParameterType.getIn()" because the return value of "springfox.documentation.service.RequestParameter.getIn()" is …...
一个生动的例子——通过ERC20接口访问Tether合约
生动的例子 USDT:符合ERC20标准的美元稳定币,Tether合约获得测试网上Tether合约地址通过自己写的ERC20接口访问这个合约 Tether合约地址:0xdAC17F958D2ee523a2206206994597C13D831ec7 IERC20.sol // SPDX-License-Identifier: GPL-3.0pra…...
新媒体时代,LCD电子价签赋予零售场景新活力
近年来,全球企业迅速掀起了数字化转型的浪潮,加速了新零售科技的发展与应用。在实体零售门店中,商品货架显示逐渐趋向智能化和多样化。然而,在信息传播日益碎片化和视频化的时代,零售门店如何更有效地吸引消费者的注意…...
芋道源码 / yudao-cloud:前端技术架构探索与实践
摘要: 随着企业信息化建设的深入,后台管理系统在企业运营中扮演着至关重要的角色。本文将以芋道源码的yudao-cloud项目为例,深入探讨其前端技术架构的设计思路、关键技术与实现细节,并分享在开发过程中遇到的挑战与解决方案。 一、…...
2024 angstromCTF re 部分wp
Guess the Flag 附件拖入ida 比较简单,就一个异或 switcher 附件拖入ida 明文flag Polyomino 附件拖入ida 需要输入九个数,然后进入处理和判断,如果满足条件则进入输出flag部分,flag和输入有关,所以要理解需要满足什么…...
STL库--priority_queue
目录 priority_queue定义 prority_queue容器内元素的访问 priority_queue()常用函数实例解析 priority_queue内元素优先级的设置 priority_queue的常见用途 priority_queue又称为优先队列,其底层是用堆来进行实现的。在优先队列中,队首元素一定是当…...
网络编程 —— Http使用httpClient实现页面爬虫
先去找类型的a标签 取出图片所在网址 取出https://desk.3gbizhi.com/deskMV/438.html 搭建Form界面 Http类 public static HttpClient Client { get; } static Http() {HttpClientHandler handler new HttpClientHandler();//处理消息对象//ServerCertificateCustomValidat…...
【本地运行chatgpt-web】启动前端项目和service服务端项目,也是使用nodejs进行开发的。两个都运行成功才可以使用!
1,启动web界面 https://github.com/Chanzhaoyu/chatgpt-web#node https://nodejs.org/en/download/package-manager # 使用nvm 安装最新的 20 版本。 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash source /root/.bashrc n…...
LeetCode 11. Container With Most Water 题解
LeetCode 11. Container With Most Water 题解 题目描述 给你 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) 。在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0) 。找出其中的两条…...
intv_ai_mk11行业落地:教育机构课件辅助生成、HR招聘文案批量产出案例
intv_ai_mk11行业落地:教育机构课件辅助生成、HR招聘文案批量产出案例 1. 模型能力与行业价值 intv_ai_mk11作为一款基于Llama架构的文本生成模型,在教育培训和人力资源领域展现出独特的实用价值。这个开箱即用的解决方案特别适合需要快速处理大量文本…...
PyAEDT终极指南:3个技巧让你快速掌握Python自动化工程仿真
PyAEDT终极指南:3个技巧让你快速掌握Python自动化工程仿真 【免费下载链接】pyaedt AEDT Python Client Package 项目地址: https://gitcode.com/gh_mirrors/py/pyaedt PyAEDT是Ansys Electronics Desktop(AEDT)的Python客户端工具包&…...
内容营销对 SEO 有什么影响
<h3 id"seo">内容营销对 SEO 有什么影响</h3> <h4 id"">引言</h4> <p>在当今数字化时代,搜索引擎优化(SEO)和内容营销被广泛认为是网站流量和业务增长的关键驱动因素。许多企业在网站建设…...
3步解锁音乐自由:NCMDump帮你破解网易云音乐NCM格式
3步解锁音乐自由:NCMDump帮你破解网易云音乐NCM格式 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为下载的网易云音乐只能在特定App里播放而烦恼吗?当你精心挑选的歌单无法在车载音响、运动手表或家庭音…...
终极Chromium性能优化方案:Thorium浏览器让你的上网体验快如闪电
终极Chromium性能优化方案:Thorium浏览器让你的上网体验快如闪电 【免费下载链接】thorium Chromium fork named after radioactive element No. 90. Windows and MacOS/Raspi/Android/Special builds are in different repositories, links are towards the top of…...
3个高效构建Web可视化应用的Meta2d.js核心方案:从问题到实践指南
3个高效构建Web可视化应用的Meta2d.js核心方案:从问题到实践指南 【免费下载链接】meta2d.js The meta2d.js is real-time data exchange and interactive web 2D engine. Developers are able to build Web SCADA, IoT, Digital twins and so on. Meta2d.js是一个实…...
Octomap在二维导航地图转换中的常见问题与优化策略
1. Octomap二维地图转换的核心挑战 第一次接触Octomap进行三维到二维地图转换时,我被它强大的空间建模能力吸引,但实际操作中踩了不少坑。最典型的就是发现生成的二维地图要么全是噪点,要么和实际环境对不上。后来才明白,这背后涉…...
知识科普短片,AI如何“看懂”并剪出逻辑?揭秘分段剪辑的内在逻辑链
傍晚,你面对电脑屏幕,刚刚录完一段长达2小时的行业知识分享。你的目标是将其剪成一部15分钟、节奏明快的知识科普短片。手动操作意味着你要反复聆听,识别核心论点,标记关键转折,再小心翼翼地将碎片串联——这个过程动辄…...
RoundedTB安装与部署:从Microsoft Store到手动编译的完整指南
RoundedTB安装与部署:从Microsoft Store到手动编译的完整指南 【免费下载链接】RoundedTB Add margins, rounded corners and segments to your taskbars! 项目地址: https://gitcode.com/gh_mirrors/ro/RoundedTB RoundedTB是一款功能强大的Windows任务栏美…...
