stopPropagation&&preventDefault

叁歲伎倆 2022-06-04 09:13 150阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		#d1{
    			width: 300px;
    			height: 300px;
    			background: red;
    		}
    		#d2{
    			width: 200px;
    			height: 200px;
    			background: yellow;
    		}
    		#d3{
    			width: 100px;
    			height: 100px;
    			background: blue;
    		}
    	</style>
    </head>
    <body>
    	<div id="d1">
    		<div id="d2">
    			<div id="d3"></div>
    		</div>
    	</div>
    	<script>
    		d1.οnclick=e=>{
    			alert("d1");
    			//该方法将停止事件的传播
    			//stopPropagation方法就是起到阻止js事件冒泡的作用
    			e.stopPropagation();
    		}
    		d2.οnclick=e=>{
    			alert("d2");
    			e.stopPropagation();
    		}
    		d3.οnclick=e=>{
    			alert("d3");
    			//这个没效果
    			e.stopPropagation();
    		}
    		//preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情
    		//例如：<a href="#"></a> 默认点击会返回页面顶部，加了这个的话，默认行为就被阻止掉了
    		//事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。
    		//e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了
    		//https://www.cnblogs.com/qq9694526/p/5653728.html
    	</script>
    
    </body>
    </html>

\------------------------------------------------------

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		#d1{
    			width: 300px;
    			height: 1000px;
    			background: yellow;
    		}
    	</style>
    </head>
    <body>
    	<div id="d1"></div>
    	<a href="#">请点击</a>
    
    	<script>
    		//querySelector() 方法仅仅返回匹配指定选择器的第一个元素
    		document.querySelector("a").οnclick=e=>{
    			e.preventDefault();
    		}
    		/*console.log(document.getElementsByTagName("a"));
    		document.getElementsByTagName("a")[0].οnclick=e=>{
    			e.preventDefault();
    		}*/
    	</script>
    </body>
    </html>

stopPropagation&&preventDefault

发表评论取消回复

还没有评论，来说两句吧...

相关阅读