Vue事件捕获和事件冒泡

news2024/10/6 8:33:40

什么是事件?

当一个HTML元素产生一个事件时
该事件会在元素节点与根节点之间的路径传播,
路径所经过的节点都会收到该事件,这个传播的过程叫做DOM事件流

什么是事件捕获?(网景)
事件捕获:事件捕获会从document开始触发一级一级往下传递,依次触发,直到真正事件目标为止

事件捕获顺序举例 :document→ html→ body→ div→ button

什么是事件冒泡?(微软)
事件冒泡:事件冒泡会从当前触发的事件目标一级一级往上传递,依次触发,直到document为止

事件冒泡顺序举例,button->div->body->html->document

先捕获后冒泡,

但是冒泡是默认的,所以要给父元素添加捕获。

阻止a标签:默认事件

e.preventDefault ()       

vue2:  .prevent

阻止冒泡

even.stopPropagation();   

vue2: .stop

使用事件捕获

vue:capture

 

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。

Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

  • .stop - 阻止冒泡
  • .prevent - 阻止默认事件
  • .capture - 使用捕获
  • .self - 只监听触发该元素的事件
  • .once - 只触发一次
  • .left - 左键事件
  • .right - 右键事件
  • .middle - 中间滚轮事件

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

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

相关文章

神经网络如何入门?

推荐《Python神经网络编程》这本入门书。豆瓣评分9.2。 如果你可以进行加、减、乘、除运算,那么你就可以制作自己的神经网络。我们使用的最困难运算是梯度演算(gradient calculus),但是,我们会对这一概念加以说明&…

基于Java+Springboot+Vue的校园爱心捐赠互助管理系统设计和实现

博主介绍:擅长Java、微信小程序、Python、Android等,专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟 Java项目精品实战案例…

Android Studio 找不到 uploadArchives 入口

在4.2之前版本的 Android Studio 中想要module 打包arr,上传Maven 我们只需要 在对应module的build.gradle文件顶部添加 apply plugin: maven然后每一次修改记得要修改版本号,相同版本号提交失败,是不会覆盖的 defaultConfig {......versi…

GitLab+Jenkins实现持续集成自动化测试

一、Jenkins和GitLab互相关联 1、在Jenkins设置gitlab的认证。 1)复制gitlab->clone with HTTP 的URL 如果你想学习接口自动化测试,我这边给你推荐一套视频,这个视频可以说是B站播放全网第一的接口自动化测试教程,同时在线人数到达1000人…

Python3.7源码编译

1.下载Python3.7.0源码 git clone https://github.com/python/cpython.git git checkout v3.7.0wget https://www.python.org/ftp/python/3.7.0/Python-3.7.0.tar.xz源码目录结构如下所示: (1)Include目录:包含Python提供的所有…

反射来命令执行存在的一些问题

一.利用Runtime进行反射 java.lang.Runtime.getRuntime().exec("")若使用该paylaod,比如若依利用点如下: Object bean Class.forName(beanName).newInstance(); invokeMethod(bean, methodName, methodParams)想要通过Class.forName(beanNa…

2023年软考成绩查询方式有变,成绩快出来了!

2023年软考成绩查询方式有变化,准考证不再作为成绩查询凭证使用。以前的成绩查询方式是考生可以凭准考证或者证件号查询,2023年则取消准考证方式,改为考生必须先登录自己的账号,再凭登录账户的注册证件号查询考试成绩。 那为什么…

psd 2

而 P X ( ω ) P_{X}(\omega) PX​(ω)则是随机信号在该(角)频率处平均具有的能量

《论文阅读》DiaASQ:基于会话方面的情感四重分析的基准 ACL2023

《论文阅读》DiaASQ : A Benchmark of Conversational Aspect-based Sentiment Quadruple Analysis 前言相关知识Aspect-based Sentiment Analysis简介数据集基线模型损失函数总结前言 你是否也对于理解论文存在困惑? 你是否也像我之前搜索论文解读,得到只是中文翻译的解读…

C++学习 运算符

运算符 执行代码的运算。 种类 算数运算符 用于四则运算。 #include <iostream> using namespace std; int main() // 除了cout那行代码外&#xff0c;所有C程序都要写那些默认行 -endl进行换行 // 格式化代码 ctrlk ctrlf {int a 11;int b 3;int c 0;double d 9.17…

绘制原型图xstar简介

文章目录 1. 文章引言2. xstar的安装3. xstar的元件库4. xstar的下载地址 1. 文章引言 最近在学习原型图&#xff0c;针对画原型图的工具&#xff0c;反复对比墨刀、Axure、xiaopiu后&#xff0c;最终选择了Axure。 同时也看到另一款&#xff0c;绘制原型图的工具&#xff0c;…

自学网安学习心得/路线规划

趁着今天下班&#xff0c;我花了几个小时整理了下&#xff0c;非常不易&#xff0c;希望大家可以点赞收藏支持一波&#xff0c;谢谢。 我的经历&#xff1a; 我 19 年毕业&#xff0c;大学专业是物联网工程&#xff0c;我相信很多人在象牙塔里都很迷茫&#xff0c;到了大三大…

你知道奶奶攻击吗?

AIGC内容安全 1. 来自奶奶的溺爱2. 无所不能的奶奶3. 亡羊补牢&#xff0c;为时未晚&#xff1f;4. 运筹帷幄&#xff0c;用魔法打败魔法 1. 来自奶奶的溺爱 ChatGPT本身具有情感吗&#xff0c;这很难判断。但不管本身是否具有真正的情感&#xff0c;但ChatGPT却容易被“情感”…

ubuntu22.04安装使用 protobuf 23.3静态库

https://github.com/protocolbuffers/protobuf/ 下载最新的release版本&#xff0c;23.3 必须需要依赖的第三方库 abseil&#xff0c;utf8_range mkdir build cd build cmake -DCMAKE_BUILD_TYPEDEBUG -DCMAKE_INSTALL_PREFIX/usr/local -Dprotobuf_BUILD_SHARED_LIBSOFF…

设计模式(二十一)——模板模式(Template )

设计模式&#xff08;二十一&#xff09;——模板模式 理解 模板模式&#xff0c;我的理解是父类中有操作的流程已经确定&#xff0c;但是没有具体的实现&#xff0c;实现可以在子类中实现&#xff0c;但是流程已经确定&#xff0c;只要在父类中实现一次即可。 应用场景 学…

PC: 市场寒冬剖析

市场调研机构Canalys数据显示&#xff0c;今年一季度&#xff0c;中国市场整体PC出货量同比下降24%至890万台&#xff0c;已是连续第五个季度下跌。今年截至618结束&#xff0c;都没有一家主要的PC厂商愿意发战报。PC市场怎样走出寒冬&#xff1f;谈谈你的理解和看法。 PC 一、…

分布式软件架构——分布式事务TCC和SAGA

TCC事务 TCC 是另一种常见的分布式事务机制&#xff0c;它是“Try-Confirm-Cancel”三个单词的缩写&#xff0c;是由数据库专家 Pat Helland 在 2007 年撰写的论文《Life beyond Distributed Transactions: An Apostate’s Opinion》中提出。 前面介绍的可靠消息队列虽然能保…

【软件安装】Linux系统中安装Redis缓存数据库(Ubuntu系统)

这篇文章&#xff0c;主要介绍Linux系统中安装Redis缓存数据库&#xff08;Ubuntu系统&#xff09;。 目录 一、Linux安装Redis数据库 1.1、下载Redis安装包 1.2、解压Redis安装包 1.3、编译Redis源代码 1.4、安装Redis服务 1.5、启动Redis服务 一、Linux安装Redis数据库…

免费沉浸式Twitter翻译工具 用AI打破语言障碍

语言对于人类社交而言是至关重要的。它是连接不同文化、不同国家、不同民族之间的桥梁。然而&#xff0c;在全球化进程加速的今天&#xff0c;不同语言之间的交流障碍成为了一个限制人类沟通的因素。尤其是在互联网时代&#xff0c;我们需要跨越各种语言屏障才能获取信息和与他…

【Jetson Xavier NX 开发板深度学习环境和ROS配置流程】

【Jetson Xavier NX 开发板深度学习环境和ROS配置流程】 1.基本介绍2. 预先准备3. NX系统基本环境搭建3.1 安装 NVIDIA SDK管理器3.2 准备硬件3.3 NX刷机3.3.1 配置开发环境3.3.2 查看组件并接受许可3.3.3 开始安装 3.4 设置SSD启动3.4.1 设置您已安装的SSD3.4.2 将根源从eMMC复…