原生js阻止冒泡stopPropagation()、cancelBubble

最新推荐文章于 2023-06-09 20:22:01 发布

每一天，每一步

最新推荐文章于 2023-06-09 20:22:01 发布

阅读量286

点赞数

分类专栏： javaScript 文章标签： js javascript html5

本文链接：https://blog.csdn.net/u010234868/article/details/118558182

版权

javaScript 专栏收录该内容

135 篇文章 12 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#box1 {
			width: 300px;
			height: 300px;
			background-color: pink;
		}
		#box2 {
			width: 200px;
			height: 200px;
			background-color: orange;
		}
		#box3 {
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="box1">
		<div id="box2">
			<div id="box3"></div>
		</div>
	</div>

	<script>
		// 点击box
		var box1 = document.getElementById('box1');
		var box2 = document.getElementById('box2');
		var box3 = document.getElementById('box3');
		var arr = [box1, box2, box3];
		for (var  i = 0; i < arr.length; i++) {
			var box = arr[i];
			box.onclick = function (e) {
				console.log(this.id);
				e = e || window.event;

				// 1. DOM标准方法
				// Propagation 传播
				// e.stopPropagation();

				// 2. 取消冒泡 IE老版本 非标准方法 chrome中适用
				e.cancelBubble = true;
			}
		}
	</script>
</body>
</html>

每一天，每一步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js阻止冒泡stopPropagation()、cancelBubble

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 { width: 300px; height: 300px; background-color: pink; } #box2 { width: 200px; height: 2.
复制链接

扫一扫