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

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 前言 在官方文档中对于事件修饰符有一个很好的说明&#xff0c;本篇文章主要记录验证测试的案例。 官方文档 事件修饰符 阻止默认事件 prevent 在js原生的语言中&#xff0c;可以根据标签本身的事件对象进行阻止默认事件…...

Go语言GoFly框架快速新增接口/上手写代码

拿到一个新框架大家可能无从下手&#xff0c;因为你对框架设计思路、结构不了解&#xff0c;从而产生恐惧&#xff0c;所以我们框架是通过简单可视化界面安装&#xff0c;安装后即可看到效果&#xff0c;然后点击先点点看各个功能&#xff0c;看现有的功能是怎么写的&#xff0…...

【Vue】v-else 和 v-else-if

作用&#xff1a;辅助v-if进行判断渲染 语法&#xff1a; v-else v-else-if"表达式"PS&#xff1a;需要紧接着v-if使用 示例代码&#xff1a; <body><div id"app"><p v-if"gender 1">性别&#xff1a;♂ 男</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的核心类之一&#xff0c;它显著的简化了SQL查询&#xff0c;并与ResultSetHandler协同工作将使编码量大为减少。 注意事项 1. 使用QreryRunner必须保证实体类的变量名&#xff0c;和sql语句中要查找的字段名必须相同&#xff0c;否则查询 不到数据,会出…...

前缀和(下)

目录 热身&#xff1a; 寻找数组的中心下标 题解&#xff1a; 代码&#xff1a; 进阶&#xff1a; 除自身之外数组的乘积 题解&#xff1a; 代码&#xff1a; 和为K的子数组 题解&#xff1a; 代码&#xff1a; 和可被 K 整除的子数组 题解&#xff1a; 同余定理…...

【排序算法】希尔排序

前言&#xff1a;学习希尔排序前最好先掌握插入排序&#xff0c;在进行&#xff1b;不会的可以点击——>【排序算法】插入排序-CSDN博客 一、希尔排序&#xff1a; 希尔排序&#xff0c;也称为缩小增量排序&#xff0c;是一种基于插入排序的快速改进算法。由Donald Shell于1…...

数学建模--LaTex插入表格详细介绍

目录 1.插入普通的边线表格 3.三线表的插入和空格说明 3.基于复杂情况下表格的插入 1.插入普通的边线表格 &#xff08;1&#xff09;像这个右边的生成的这个比较普通的表格&#xff0c;我们是使用下面的代码实现的&#xff1a; &#xff08;2&#xff09;和插入一个一个图片…...

未来已来:Flutter引领的安卓与跨平台开发奇幻之旅

引言 随着移动开发技术的飞速发展&#xff0c;跨平台开发框架如Flutter正逐渐改变着传统的安卓和iOS开发格局。作为一名资深的安卓开发工程师&#xff0c;我深刻感受到了Flutter带来的变革和机遇。今天&#xff0c;我想与大家分享Flutter在跨平台开发中的奇幻之旅&#xff0c;…...

如何将Windows PC变成Wi-Fi热点?这里提供详细步骤

序言 Windows 10和Windows 11都有内置功能,可以将你的笔记本电脑(或台式机)变成无线热点,允许其他设备连接到它并共享你的互联网连接。以下是操作指南。 由于Windows中隐藏的虚拟Wi-Fi适配器功能,你甚至可以在连接到另一个Wi-Fi网络或无线路由器时创建Wi-Fi热点,通过另…...

报错:Cannot invoke “springfox.documentation.service.ParameterType.getIn()“

文章目录 前言一、报错分析二、解决办法修改代码 总结 前言 遇到报错&#xff1a;Cannot invoke "springfox.documentation.service.ParameterType.getIn()" because the return value of "springfox.documentation.service.RequestParameter.getIn()" is …...

一个生动的例子——通过ERC20接口访问Tether合约

生动的例子 USDT&#xff1a;符合ERC20标准的美元稳定币&#xff0c;Tether合约获得测试网上Tether合约地址通过自己写的ERC20接口访问这个合约 Tether合约地址&#xff1a;0xdAC17F958D2ee523a2206206994597C13D831ec7 IERC20.sol // SPDX-License-Identifier: GPL-3.0pra…...

新媒体时代,LCD电子价签赋予零售场景新活力

近年来&#xff0c;全球企业迅速掀起了数字化转型的浪潮&#xff0c;加速了新零售科技的发展与应用。在实体零售门店中&#xff0c;商品货架显示逐渐趋向智能化和多样化。然而&#xff0c;在信息传播日益碎片化和视频化的时代&#xff0c;零售门店如何更有效地吸引消费者的注意…...

芋道源码 / yudao-cloud:前端技术架构探索与实践

摘要&#xff1a; 随着企业信息化建设的深入&#xff0c;后台管理系统在企业运营中扮演着至关重要的角色。本文将以芋道源码的yudao-cloud项目为例&#xff0c;深入探讨其前端技术架构的设计思路、关键技术与实现细节&#xff0c;并分享在开发过程中遇到的挑战与解决方案。 一、…...

2024 angstromCTF re 部分wp

Guess the Flag 附件拖入ida 比较简单&#xff0c;就一个异或 switcher 附件拖入ida 明文flag Polyomino 附件拖入ida 需要输入九个数&#xff0c;然后进入处理和判断&#xff0c;如果满足条件则进入输出flag部分&#xff0c;flag和输入有关&#xff0c;所以要理解需要满足什么…...

STL库--priority_queue

目录 priority_queue定义 prority_queue容器内元素的访问 priority_queue()常用函数实例解析 priority_queue内元素优先级的设置 priority_queue的常见用途 priority_queue又称为优先队列&#xff0c;其底层是用堆来进行实现的。在优先队列中&#xff0c;队首元素一定是当…...

网络编程 —— 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&#xff0c;启动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…...

Java 无人图书借阅系统设计与完整源码实现

以下是一个基于Java的无人图书借阅系统的设计与完整源码实现方案&#xff0c;涵盖系统架构、核心模块、数据库设计、关键代码实现及部署建议&#xff1a;一、系统架构设计1. 分层架构表现层&#xff1a;用户端&#xff1a;微信小程序&#xff08;UniApp开发&#xff09; H5页面…...

内容营销对 SEO 有什么影响

<h3 id"seo">内容营销对 SEO 有什么影响</h3> <h4 id"">引言</h4> <p>在当今数字化时代&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;和内容营销被广泛认为是网站流量和业务增长的关键驱动因素。许多企业在网站建设…...

YOLOv12模型轻量化实战:应对嵌入式设备资源约束

YOLOv12模型轻量化实战&#xff1a;应对嵌入式设备资源约束 最近几年&#xff0c;目标检测模型在精度上突飞猛进&#xff0c;但随之而来的是模型体积和计算量的急剧膨胀。当你兴冲冲地想把最新的YOLOv12模型部署到Jetson Nano或者树莓派上时&#xff0c;往往会发现现实很骨感&…...

手把手教你部署M2FP:快速搭建人体部位识别服务

手把手教你部署M2FP&#xff1a;快速搭建人体部位识别服务 1. 引言&#xff1a;为什么选择M2FP进行人体解析&#xff1f; 在计算机视觉领域&#xff0c;人体解析&#xff08;Human Parsing&#xff09;是一项关键技术&#xff0c;它能够将图像中的人体划分为多个语义区域&…...

GLM-OCR实操手册:Web界面上传PNG/JPG/WEBP三格式兼容性验证与建议

GLM-OCR实操手册&#xff1a;Web界面上传PNG/JPG/WEBP三格式兼容性验证与建议 1. 项目概述与测试背景 GLM-OCR是一个基于先进多模态架构的OCR识别模型&#xff0c;专门为处理复杂文档而设计。它不仅能识别普通文字&#xff0c;还能准确识别表格结构和数学公式&#xff0c;在实…...

手把手教你:Trae 中不写一行代码,一句话实现增删查改

1. 下载并运行 RuoYi 项目 基于您提供的下载地址和操作步骤&#xff0c;流程如下&#xff1a; 1.1. 下载 RuoYi 项目 官网地址&#xff1a;如链接3所示&#xff0c;RuoYi的官方网址是 https://www.ruoyi.vip/。 下载&#xff1a;在官网&#xff0c;您可以根据需要下载不同版…...

nfc-list使用教程

nfc-list 是 Kali Linux 中基于 libnfc 库&#xff08;开源 NFC 开发框架&#xff09;的基础 NFC/RFID 设备检测工具&#xff0c;核心功能是扫描并列出当前连接的 NFC 读卡器设备&#xff0c;以及贴近读卡器的 NFC 卡片&#xff08;或标签&#xff09;的详细信息&#xff0c;包…...

Todo 时代结束了:当 AI 开始自己管项目,人类管理者该管什么?

AI 不再只是执行你的指令&#xff0c;它开始管理自己的项目了。这是 Anthropic Claude Code 团队成员 Thariq Shihipar 在 2026 年悄悄发出的一条技术更新公告里&#xff0c;藏着的一个巨大信号。大多数人划过去了&#xff0c;没有停下来。Claude Code 宣布&#xff1a;将 Todo…...

Jimeng LoRA企业落地案例:设计公司LoRA训练-测试-选型一体化流程

Jimeng LoRA企业落地案例&#xff1a;设计公司LoRA训练-测试-选型一体化流程 1. 项目简介 今天给大家分享一个特别实用的企业级AI应用案例——如何为设计公司搭建一套完整的LoRA模型训练、测试和选型流程。这个项目基于Jimeng&#xff08;即梦&#xff09;系列LoRA模型&#…...

万物识别镜像在内容安全场景的应用:SpringBoot集成与效果展示

万物识别镜像在内容安全场景的应用&#xff1a;SpringBoot集成与效果展示 1. 万物识别镜像技术解析 万物识别-中文-通用领域镜像基于cv_resnest101_general_recognition算法构建&#xff0c;是一个强大的视觉识别工具。这个镜像最突出的特点是能够识别超过5万类日常物体&…...