事件详解（事件冒泡说明）

qq_45783949

已于 2024-05-16 21:24:54 修改

阅读量134

点赞数

分类专栏： HTML 文章标签： javascript

于 2020-07-20 12:22:23 首次发布

本文链接：https://blog.csdn.net/qq_45783949/article/details/107460776

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

冒泡

事件冒泡说明
- 具体代码及效果
- - 阻止冒泡

事件冒泡说明

当一个元素接收到事件时，会将其接收到的事件传给自己的父级，上传直到window 。（注意：这里传递的仅仅是事件并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件也不会有什么表现但事件确实传递了。）

具体代码及效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#outer{
				width: 200px;
				height: 200px;
				background-color: #CECECE;
			}
			#inner{
				width: 100px;
				height: 100px;
				background-color: #7CCBE9;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<div id="inner"></div>
		</div>
		<script type="text/javascript">
			var outer = document.getElementById("outer");
			var inner = document.getElementById("inner");
			outer.onclick = function(){
				console.log("outer");
			}
			inner.onclick = function(e){
				var evt = e || event;
				console.log("inner");
			}
		</script>
	</body>
</html>

说明：点击子块div (id = “inner”)，同时触发inner.onclick 与 outer.onclick函数

注意：当子块与父块不重叠时，点击子块仍触发父块绑定事件，由此可见冒泡与子父块位置无关，而与html代码有关

阻止冒泡

特定情况下，我们并不希望冒泡事件的发生，下面介绍两种组织冒泡的方法：
evt.cancelBubble = true; //适用于IE及现代浏览器
evt.stopPropagation(); //适用于现代浏览器
直接贴代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#outer{
				width: 200px;
				height: 200px;
				background-color: #CECECE;
			}
			#inner{
				width: 100px;
				height: 100px;
				background-color: #7CCBE9;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<div id="inner"></div>
		</div>
		<script type="text/javascript">
			var outer = document.getElementById("outer");
			var inner = document.getElementById("inner");
			outer.onclick = function(){
				console.log("outer");
			}
			inner.onclick = function(e){
				var evt = e || event;
				console.log("inner");
				//阻止冒泡
				evt.cancelBubble = true; //适用于IE及现代浏览器
				//evt.stopPropagation();  //适用于现代浏览器
			}
		</script>
	</body>
</html>

这样，再次点击子块时，父块onclick函数将不被触发。

qq_45783949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件详解（事件冒泡说明）

冒泡事件冒泡说明具体代码及效果阻止冒泡事件冒泡说明当一个元素接收到事件时，会将其接收到的事件传给自己的父级，上传直到window 。（注意：这里传递的仅仅是事件并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件也不会有什么表现但事件确实传递了。）具体代码及效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>
复制链接

扫一扫