js阻止冒泡的两种方法

冒泡是一种很有意思的现象，在我们的 js 中也有冒泡现象，让我们一起去看看吧先来看一段代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body onclick="bo()"><div onclick

释xin

14303人浏览 · 2021-09-26 20:07:02

释xin · 2021-09-26 20:07:02 发布

冒泡是一种很有意思的现象，在我们的 js 中也有冒泡现象，让我们一起去看看吧

先来看一段代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body onclick="bo()">
		<div onclick="d()">
			<button onclick="b()">
				<p onclick="ph()">点我冒泡</p>
			</button>
		</div>
		<script type="text/javascript">
            function bo() {
				console.log("body标签被点击了");
			};
            
            function d() {
				console.log("div标签被点击了");
			};
            
            function b() {
				console.log("button标签被点击了");
			};
            
			function ph() {
				console.log("p标签被点击了啦");
			};
            
		</script>
	</body>
</html>

运行结果为：
在这里插入图片描述

我们可以看到，我只点击了 p 标签，可是在外层的标签已经全部被触发了，这就是 js 中的冒泡现象。

那我要是不想要他们外层的事件被触发呢，那这就到了我们这篇文章的重点了，我们一起来看一下解决方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.js"></script>
	</head>
	<body>
		<div>
			<button>
				<p>点击捕获</p>
			</button>
		</div>
		<script type="text/javascript">
			var bd=document.querySelector("body");
			var di=document.querySelector("div");
			var bu=document.querySelector("button");
			var px=document.querySelector("p");
			 
			bd.addEventListener("click",function(){
				console.log("body被点击了")
			});
			di.addEventListener("click",function(){
				console.log("div被点击了")
			});
			bu.addEventListener("click",function(){
				console.log("buttom被点击了")
			});
            
            
            // 第一种
//			px.addEventListener("click",function(event){
            //  event 是事件源，表示当前点击的元素
//				console.log("p被点击了");
//				event.stopPropagation();
//			});
            
            // 第二种
			px.addEventListener("click",function(event){
			 if(event.target==this){//判断是否是当前绑定事件的元素元素触发的该事件
			 	console.log("p被点击了");
			 event.cancelBubble = true;  
			 }
			 });
		</script>
	</body>
</html>