Vue之v-on修饰符capture（008）

最新推荐文章于 2024-04-05 13:33:40 发布

从小白小菜开始

最新推荐文章于 2024-04-05 13:33:40 发布

阅读量338

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_31707323/article/details/115595472

版权

Vue 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

Vue之v-on修饰符capture

未加capture修饰符
完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<title>v-on(capture)</title>
	</head>
	<body>
		<div id="app" @click="myCatch('最外层')" style="background-color: blue;height: 300px;width:300px;">
			<div @click="myCatch('中间层')"
				style="background-color: red;height: 200px;width:200px;left: 50px;top: 50px;position:absolute;  ">
				<div @click="myCatch('最里层')"
					style="background-color: yellow;height: 100px;width:100px;left: 50px;top: 50px;position:absolute;  ">
				</div>
			</div>
		</div>
		<script>
			let vm = new Vue({
				el: "#app",
				methods: {
					myCatch(mg) {
						console.log("我是" + mg);
					}
				}
			})
		</script>
	</body>
</html>

效果如图

点击最转而的黄色块在这里插入图片描述
点击中间的红色

点击最外边的蓝色

正常你冒泡，从点击元素开始由内向外冒泡。
把capture加到最里事件。

<div @click.capture="myCatch('最里层')"

依次点击最里、中间，最外层，效果如图
在这里插入图片描述
没有变化。
把capture加到中间层，

<div @click.capture="myCatch('中间层')"

依次点击最里、中间、最外，效果如图：
在这里插入图片描述
点击最里层时，发现最先捕获的是中间层，其它没变化。
把capture加到最外层

<div id="app"@click.capture="myCatch('最外层')" style="background-color: blue;height: 300px;width:300px;">

依次点击最里、中间、最外，效果如图：
在这里插入图片描述
首先捕获最外层。
给每个事件都加上capture,

<div id="app"@click.capture="myCatch('最外层')" style="background-color: blue;height: 300px;width:300px;">
			<div @click.capture="myCatch('中间层')"
				style="background-color: red;height: 200px;width:200px;left: 50px;top: 50px;position:absolute;  ">
				<div @click.capture="myCatch('最里层')"
					style="background-color: yellow;height: 100px;width:100px;left: 50px;top: 50px;position:absolute;  ">
				</div>
			</div>
		</div>

依次点击最里、中间、最外，效果如图：
在这里插入图片描述
总结：
1. 冒泡是从里往外冒，捕获是从外往里捕。
2. 当捕获存在时，先从外到里的捕获，剩下的从里到外的冒泡输出。
3. capture可以理解为开启捕获模式。

从小白小菜开始

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue之v-on修饰符capture（008）

Vue之v-on修饰符capture未加capture修饰符完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <title>v-on(capture)</title> </head> <body
复制链接

扫一扫