js 冒泡捕获

Posted 2021-03-26 Howhy Blogs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 冒泡捕获相关的知识，希望对你有一定的参考价值。

<!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 冒泡捕获的主要内容，如果未能解决你的问题，请参考以下文章

js 冒泡 捕获

js 冒泡捕获