码迷,mamicode.com
首页 > Web开发 > 详细

js 冒泡 捕获

时间:2019-10-12 13:22:18      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:class   lang   ora   log   rip   ini   开启   this   eve   

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		.div1{
			width:400px;
			height:400px;
			background-color: green;
		}
		.div2{
			width:300px;
			height:300px;
			background-color: red;
		}
		.div3{
			width:200px;
			height:200px;
			background-color: blue;
		}
				.div4{
			width:100px;
			height:100px;
			background-color: #CCCCCC;
		}
	</style>
</head>
<body>
	<div class="div1 aa">div1
			<div class="div2 aa">div2
				<div class="div3 aa">div3
					<div class="div4 aa">
					div4
				</div>
			</div>
		</div>
	</div>
	<script>
		var divs=document.querySelectorAll(‘.aa‘)
		//console.log(divs)			
		for(const div of divs){
			div.addEventListener("click",function(event){
				console.log(this.className) //都是默认时冒泡 未阻止 点击 div4时打印 div4 aa div3 aa...div1 aa 若开启阻止则点击div4时只打印div4 aa 
				event.stopPropagation();//阻止冒泡 捕获  捕获true 未阻止 点击 div4时打印 div1 aa div2 aa...div4 aa 若开启阻止则点击任何div时只打印div1 aa
			},true)//true是捕获 默认是false冒泡 
		}
		
	</script>
</body>
</html>

  

js 冒泡 捕获

标签:class   lang   ora   log   rip   ini   开启   this   eve   

原文地址:https://www.cnblogs.com/howhy/p/11660718.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!