stopPropagation&&preventDefault

最新推荐文章于 2024-06-03 11:01:33 发布

spfLinux

最新推荐文章于 2024-06-03 11:01:33 发布

阅读量296

点赞数

分类专栏： js 文章标签： stopPropagatio preve

本文链接：https://blog.csdn.net/spfLinux/article/details/78761399

版权

js 专栏收录该内容

137 篇文章 3 订阅

订阅专栏

<!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>