[JavaScript]取消默认行为和事件冒泡

小鱼儿 2022-11-27 10:17 146阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		#dv1 { 
    			width: 300px;
    			height: 300px;
    			background: red;
    		}
    
    		#dv2 { 
    			width: 100px;
    			height: 100px;
    			background: blue;
    		}
    	</style>
    </head>
    
    <body>
    
    	<div id='dv1'>
    		<div id='dv2'></div>
    	</div>
    
    
    	<a href="http://www.baidu.com/" id='oA'>跳转</a>
    	
    
    	<script>
    		oA.onclick = function (e) { 
    			if (e.preventDefault) {  //阻止默认行为
    				e.preventDefault() //w3c
    			} else { 
    				e.returnValue = false //ie
    			}
    		}
    
    		dv1.onclick = function () { 
    			alert("div1")
    		}
    		dv2.onclick = function (e) { 
    			alert("div1")
    			var e = window.event || e;
    
    			if (e.stopPropagation) {  //阻止事件冒泡
    				e.stopPropagation(); //w3c
    			} else { 
    				e.cancelBubble = true; //ie
    			}
    			//阻止事件冒泡后点击div2就不再会触发div2的事件了
    
    		}
    	</script>
    
    </body>
    
    </html>

更多阻止事件冒泡、事件捕获以及应用场景相关内容查看：  
https://blog.csdn.net/qq\_43540219/article/details/107826683?ops\_request\_misc=%257B%2522request%255Fid%2522%253A%2522159741341919195162513654%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request\_id=159741341919195162513654&biz\_id=0&utm\_medium=distribute.pc\_search\_result.none-task-blog-2blogfirst\_rank\_v2~rank\_blog\_v1-1-107826683.pc\_v2\_rank\_blog\_v1&utm\_term=%E5%86%92%E6%B3%A1&spm=1018.2118.3001.4187