When learning to prevent events from bubbling , Let's think about a problem ：

addEventListener The third parameter of is true Is it to prevent the transmission of events or false?

answer ： Will not prevent the transmission of events , because true Capture phase triggers  false The bubbling phase triggers ; To prevent event delivery The only way is to stop the event from bubbling : The event object calls stopPropagation()

Direct code description ：

<style>
			body{
				margin: 0px;
			}
			.box1 {
				width: 400px;
				height: 300px;
				background-color: brown;
				cursor: pointer;
				position: relative;
				left: 100px;
				top: 20px;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: red;
				cursor: pointer;
				position: absolute;
				left: 500px;
				top: 20px;
			}
			.box3{
				width: 100px;
				height: 100px;
				background-color: gold;
				cursor: pointer;
				margin: 10px;
				padding: 5px;
				border: 3px solid saddlebrown;
			}
		</style>
		<div class='box1'>
			<div class="box2">
				 <div class="box3">
					 
				 </div>
			</div>
		</div>
		<script>
			//addEventListener The third parameter   true Capture phase triggers   false The bubbling phase triggers  
			var box1=document.querySelector(".box1")
			var box2=document.querySelector(".box2")
			var box3=document.querySelector(".box3")
			box1.addEventListener("click",(e)=>{
				console.log("box111111111a",e)
			},false)
			box2.addEventListener("click",(e)=>{
				console.log("box22222")
			},false)
			box3.addEventListener("click",(e)=>{
				//  Stop the event from bubbling 
				e.stopPropagation()
				console.log("box33333")
			})
		</script>

Running results ：

Click on box3, You can see that only box3 Triggered , because box1,box2 It's triggered in the bubbling phase , However, in box3 Event object called stopPropagation(), Prevented the incident from bubbling , therefore box1,box2 The event of no longer triggers .

Be careful ： Only the bubbling stage can be prevented , The capture phase cannot be prevented .

Take the above example box1 Of addEventListener The third parameter of the listener is changed to true to glance at

<style>
			body{
				margin: 0px;
			}
			.box1 {
				width: 400px;
				height: 300px;
				background-color: brown;
				cursor: pointer;
				position: relative;
				left: 100px;
				top: 20px;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: red;
				cursor: pointer;
				position: absolute;
				left: 500px;
				top: 20px;
			}
			.box3{
				width: 100px;
				height: 100px;
				background-color: gold;
				cursor: pointer;
				margin: 10px;
				padding: 5px;
				border: 3px solid saddlebrown;
			}
		</style>
		<div class='box1'>
			<div class="box2">
				 <div class="box3">
					 
				 </div>
			</div>
		</div>
		<script>
			//addEventListener The third parameter   true Capture phase triggers   false The bubbling phase triggers  
			var box1=document.querySelector(".box1")
			var box2=document.querySelector(".box2")
			var box3=document.querySelector(".box3")
			box1.addEventListener("click",(e)=>{
				console.log("box111111111a",e)
			},true)
			box2.addEventListener("click",(e)=>{
				console.log("box22222")
			},false)
			box3.addEventListener("click",(e)=>{
				//  Stop the event from bubbling 
				e.stopPropagation()
				console.log("box33333")
			})
		</script>

Running results ：

  Click on box3, You can see box1 and box3 The event triggered , however box2 There is no trigger , Therefore, the transmission of capture phase cannot be affected .

There is another way to prevent the event from bubbling stopImmediatePropagation(), This method will not only prevent bubbling to ancestor elements , It also blocks other event handlers for the same event on the same node .

Modify the above code , to box3 Add another click event .

<style>
			body{
				margin: 0px;
			}
			.box1 {
				width: 400px;
				height: 300px;
				background-color: brown;
				cursor: pointer;
				position: relative;
				left: 100px;
				top: 20px;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: red;
				cursor: pointer;
				position: absolute;
				left: 500px;
				top: 20px;
			}
			.box3{
				width: 100px;
				height: 100px;
				background-color: gold;
				cursor: pointer;
				margin: 10px;
				padding: 5px;
				border: 3px solid saddlebrown;
			}
		</style>
		<div class='box1'>
			<div class="box2">
				 <div class="box3">
					 
				 </div>
			</div>
		</div>
		<script>
			//addEventListener The third parameter   true Capture phase triggers   false The bubbling phase triggers  
			var box1=document.querySelector(".box1")
			var box2=document.querySelector(".box2")
			var box3=document.querySelector(".box3")
			box1.addEventListener("click",(e)=>{
				console.log("box111111111a",e)
			},true)
			box2.addEventListener("click",(e)=>{
				console.log("box22222")
			},false)
			box3.addEventListener("click",(e)=>{
				//  Stop the event from bubbling 
				e.stopImmediatePropagation()
				console.log("box33333")
			})
            box3.addEventListener("click",(e)=>{
				console.log("box33333bbb")
			})
		</script>

Running results ：

  It can be seen that there is no printing box33333bbb, So prove it stopImmediatePropagation() Block other event handlers of the same event on the same node

special IE browser , use cancelBubble() Methods to stop bubbling ,event.cancelBubble=true when , Stop the event from bubbling   Apply to ie8 And ie8 following .

Default event

The official provides us with many default events , Such as form submission ,a Tag jump , Right click menu and so on .

For default events, we cannot pass stopPropagation() To cancel its trigger , For this purpose, the official provides an exclusive method  preventDefault().

Write a small example ： Aim at a The link of the tag jumps

        <a href="http://www.baidu.com" id="a1">baidu</a>
		<script>
			var a1=document.getElementById("a1")
			a1.addEventListener("click",(e)=>{
				console.log(66666)
				// Block system default Events 
				e.preventDefault()// Can block default Events 
			})
			
		</script>

After running, the console prints 66666, Will not jump to Baidu homepage .

special IE：event.returnValue=false To prevent default events .