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 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了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>
</div>

script:

var app = new Vue({
	el: '#app',
	methods:{
		type(n){
			console.log("我是",n);
		}
	}
})

结果:
点击子元素,子元素和父元素都会输出

15:44:57.505 我是 奔驰车 at .index.html:43
15:44:57.989 我是 车 at index.html:43

1.2.事件捕获例子

事件冒泡的反过程就是事件捕获
(冒泡:最内层的元素开始发生，一直向上传播，直到document对象;
捕获:从document对象开始发生)
html:

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

结果:
不同于冒泡是先输入子元素再输出父元素,事件捕获是先输出父元素再输出子元素

17:14:59.753 我是 车 index.html:46
17:14:59.757 我是 奔驰车 index.html:46

2.阻止冒泡和阻止默认行为

例子

html:

<div id="app">
	<div id="car" @click.stop="type('车')">
		<div id="benzcar" @click.stop="type('奔驰车')">
			<a @click.stop.prevent="type('a')" href="https://www.baidu.com">百度一下</a>
		</div>
	</div>
</div>

结果:
1.点击子元素,父元素不输出
2.点击a标签不发生跳转