javascript 冒泡的阻止

最新推荐文章于 2022-02-16 04:38:40 发布

doubleicon

最新推荐文章于 2022-02-16 04:38:40 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：冒泡的阻止 stopPropagation cancelBubble

本文链接：https://blog.youkuaiyun.com/u011872945/article/details/27703655

JavaScript 专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍了事件冒泡和事件捕获的概念及其在不同浏览器中的实现方式，并提供了阻止事件冒泡的具体代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件冒泡（的过程）：事件从发生的目标（event.srcElement||event.target）开始，沿着文档逐层向上冒泡，到document为止。
事件捕获（的过程）：则是从document开始，沿着文档树向下，直到事件目标为止。

关键一句：在IE浏览器中，只发生事件冒泡的过程；在W3C（或支持事件捕获的）浏览器中，事件先进入有外向里进入捕获阶段，再由里向外进入冒泡阶段。

我们把事件的捕获和冒泡的过程统称为事件的传播，对于事件的传播我们可以阻止，
在w3c中我们使用e.stopPropagation();方法
在IE下面，我们设置window.event.cancelBubble = true; = true;

阻止事件的默认行为，例如click,a的跳转
在w3c中，使用preventDefault()方法，
在IE下设置window.event.returnvalue = false;

并不是所有的事件都能冒泡，如blur,focus,load,unload等。

下面我们说一下冒泡的阻止，代码如下

<span style="font-family:Comic Sans MS;font-size:12px;"><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冒泡的阻止</title>
<style type="text/css">
*{ margin:0; padding:0;}
</style>
</head>
<body>
<div id="outer" style=" width:500px; height:500px; background:#000;">
	<div id="inner" style="width:400px; height:400px; background:red;"></div>
</div>
<script type="text/javascript">
	//阻止事件冒泡的通用函数
	function stopBubble(e){
		// 如果传入了事件对象，那么就是非ie浏览器
		if(e&&e.stopPropagation){
			//因此它支持W3C的stopPropagation()方法
			e.stopPropagation();
		}else{
			//否则我们使用ie的方法来取消事件冒泡
			window.event.cancelBubble = true;
		}
	}

	var obj1 = document.getElementById('outer');
	var obj2 = document.getElementById('inner');
	obj1.onclick = function(){
		alert('我点击了外部的');
	}
	obj2.onclick = function(e){
		alert('我点击了内部的');
		stopBubble(e);
	}
</script>
</body>
</html></span>