2021-07-29 vue事件冒泡和事件捕获,阻止冒泡和阻止浏览器默认行为

最新推荐文章于 2025-01-14 14:10:00 发布

原创

最新推荐文章于 2025-01-14 14:10:00 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#事件冒泡 #事件捕获 #浏览器默认行为 #vue #js

本文介绍了Vue中的事件处理机制，包括事件冒泡和事件捕获的概念，通过实例展示了事件冒泡的过程。同时，详细讲解了如何阻止事件冒泡以及如何阻止浏览器的默认行为，如@click.stop和@click.prevent的使用，帮助开发者更好地理解和掌握Vue事件处理技巧。

文章目录

0.概要

1.阻止冒泡:@click.stop=‘fn’
2.阻止浏览器的默认行为:@click.prevent=‘fn’
3.事件捕获:@click.capture=‘fn’

1.事件冒泡和事件捕获

1.1.事件冒泡例子

html:

<div id="app">
	<div id="car" @click="type('车')">
		<div id="benzcar" @click="type('奔驰车')"></div>
	</div

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端OnTheRun

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Vue3前端开发自学demo,事件修饰符-阻止默认事件和冒泡事件

yrldjsbk的博客

01-06

1309

下面演示的代码是，vue3前端开发技术里面经常遇到的，阻止默认事件，例如，阻止a标签的href属性，跳转到一个别的地址去。这是传统的方式，阻止默认事件的发生。但是在vue3开发里面，为了节省程序员的开发时间，提升办事效率，植入了很多修饰符。同理，如果你想阻止冒泡事件，只需要写成【@click.stop】即可实现了。直接在事件后面使用.prevent即可实现，阻止默认事件的效果。如图片指向的位置，就是，vue3的事件修饰符，效果案例展示。Vue3前端开发自学demo,事件修饰符-阻止默认事件。

vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析

10-17

总而言之，Vue的事件处理机制使得开发者可以非常方便地处理事件相关的逻辑，无论是简写形式、事件对象处理、阻止冒泡还是默认行为的控制，以及对键盘事件的监听，Vue都提供了丰富且简洁的API来帮助开发者实现这些...

参与评论您还未登录，请先登录后发表或查看评论

阻止浏览器的默认事件和冒泡

07-03

阻止浏览器的默认事件和冒泡事件.用onbeforeunload事件。无论快捷键还是点击菜单的刷新，都会有提示，关闭页面时也会出现。

vue阻止浏览器默认事件

qq_38718629的博客

02-22

3227

项目中遇到长按、鼠标右键等操作时，会出发浏览器的默认事件，这时候我们要阻止浏览器默认事件，在vue中阻止默认事件，可以使用 @contextmenu.prevent=""实现

vue阻止浏览器右键默认行为

seimeii的博客

05-12

989

vue阻止浏览器右键默认行为

JS阻止默认行为和Vue阻止默认行为

m0_65992672的博客

09-13

731

JS阻止默认行为和Vue阻止默认行为。

js事件冒泡与事件捕获、阻止事件冒泡和浏览器默认行为

weixin_45471827的博客

08-15

1907

1、事件流：事件流描述的是从页面中接收事件的顺序，“事件冒泡流”由IE提出，“事件捕获流”由 Netscape 提出；事件流包括三个阶段：事件捕获阶段、处于目标阶段（即触发事件的元素）和事件冒泡阶段。 “DOM2 级事件”规范要求事件应该从 document 对象开始捕获阶段，但主流浏览器都是从 window 对象开始。 “DOM2 级事件”规范明确要求捕获阶段不会涉及事件目标（因为目标阶...

重新认识vue之事件阻止冒泡的实现

10-18

Vue还提供了其他的事件修饰符，如`.prevent`用于阻止默认行为（如表单提交），`.capture`用于在事件冒泡开始时触发事件处理函数，`.self`只在事件发生在目标元素自身时触发，`.once`只触发一次，以及`.passive`优化...

vue事件修饰符和按键修饰符用法总结

12-03

在处理事件时，有时我们需要对事件进行一些特殊操作，比如阻止默认行为、防止事件冒泡等。Vue.js 为此引入了事件修饰符，使得这些操作变得更加简单。本文将深入探讨Vue中的事件修饰符和按键修饰符。首先，让我们来...

vue 阻止浏览器的默认返回事件，自定义返回行为

aiyang1214878408的博客

06-29

1661

首先阻止浏览器返回的事件 mounted() { if (window.history && window.history.pushState) { // 向历史记录中插入了当前页 history.pushState(null, null, document.URL); window.addEventListener('popstate', this.goBack, false); } }, destroyed() { //离开

vue自定义热键、自定义快捷键组合，vue阻止默认事件

m0_50427485的博客

02-11

4882

vue自定义热键、自定义快捷键组合，vue阻止默认事件，window.addEventListener监听事件，键盘事件KeyDown，自定义快捷键组合可能会与浏览器的默认快捷键冲突，mixins

Javascript阻止事件冒泡和浏览器默认行为

weixin_45727472的博客

07-15

269

1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } 2.当按键后,不希望按键

如何阻止浏览器默认事件和事件冒泡和捕获行为

weixin_46409887的博客

03-27

583

//图片如下: <style> #box{ width: 600px; height: 600px; background: red; } #box1{ width:400px; height: 400px; background: green; } ...

vue click阻止事件冒泡与默认行为

weixin_43829905的博客

05-14

1万+

vue click阻止事件冒泡与默认行为阻止事件冒泡阻止默认行为阻止事件冒泡 <div @click="click1()" > <a @click="click2()"></a> </div> //正确写法 <div @click="click1()" > &...

事件捕捉，事件冒泡，事件代理，阻止事件冒泡，阻止默认事件

weixin_44580139的博客

08-03

1118

文章目录1. 事件冒泡与事件捕获事件冒泡事件捕获2. DOM2事件模型3. addEventListener 的第三个参数4. 事件代理5. 阻止事件冒泡1. 给子级加event.stopPropagation()2.在事件处理函数中返回 false3. event.target==event.currentTarget，让触发事件的元素等于绑定事件的元素，也可以阻止事件冒泡5. 阻止默认事件 1. 事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发

vue3阻止a标签冒泡

qq_41821445的博客

10-23

617

冒泡是指当一个元素上的事件被触发时，它会向父元素传播，直到到达文档的根节点。在JS中，事件冒泡是默认行为。这意味着，如果你在一个子组件上绑定了一个事件，当该事件被触发时，它会沿着组件树向上冒泡，直到到达根组件。好啦到此就结束了又是记录问题的一天。在a标签上添加以下属性即可阻止冒泡。

vue中阻止click事件冒泡（防止触发另一个事件）的方法