Vue之v-on修饰符self（009）

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

从小白小菜开始

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

阅读量216

点赞数

分类专栏： Vue

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

版权

Vue 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

Vue之v-on修饰符self

加self到最里层div上，完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<title>v-on(self)</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.self="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>

点击最里div,效果如图：

在这里插入图片描述
加self到中间层div上

<div @click.self="myCatch('中间层')"
				style="background-color: red;height: 200px;width:200px;left: 50px;top: 50px;position:absolute;  ">

点击最里div,效果如图：
在这里插入图片描述
发现没有冒泡到中间层，也就是阻止了冒泡到自身。
加self到中间层，最外层div上.

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

点击最里div,效果如图：
在这里插入图片描述
验证刚才的猜想，是阻止了冒泡到自身。
依次点击中间层，最外层，结果如下：

自己猜想正确。

从小白小菜开始

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之v-on修饰符self（009）

Vue之v-on修饰符self加self到最里层div上，完整代码<!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&g
复制链接

扫一扫

专栏目录