js阻止冒泡的两种方法

冒泡是一种很有意思的现象,在我们的 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>

运行结果为:
js阻止冒泡的两种方法_第1张图片

我们可以看到,我只点击了 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>

运行结果如下
js阻止冒泡的两种方法_第2张图片
可以看到,我点击 p标签 后,只有 p标签 的方法被触发了
好啦,文章到这就结束啦,我们下次见咯

你可能感兴趣的:(html,html5,javascript)