JavaScript中的事件冒泡

最新推荐文章于 2022-08-23 21:56:52 发布

show_code

最新推荐文章于 2022-08-23 21:56:52 发布

阅读量1.9k

点赞数

分类专栏： Web前端文章标签： javascript 事件冒泡

本文链接：https://blog.csdn.net/playboyanta123/article/details/17559573

版权

Web前端专栏收录该内容

74 篇文章

订阅专栏

Javascript中的事件有它的独特性，就是有默认执行事件，比如冒泡事件就是一个。在有些应用中，停止事件的冒泡(或捕获)被证明在复杂的应用程序中是极其有用的。不幸的是，IE提供了一种与所有其它浏览器不同的方式来阻止事件冒泡。以下是一个通用的取消事件冒泡的函数。该函数接受单个参数：传递到事件处理程序的事件对象。该函数处理取消事件冒泡的两种方式：标准的W3C 方式和非标准的IE方式。

停止事件冒泡的通用函数：

function stopBubble(e) {
 //如果提供了事件对象，则这是一个非IE浏览器
 if ( e && e.stopPropagation )
   //因此它支持W3C的stopPropagation()方法
   e.stopPropagation();
 else
 //否则，我们需要使用IE的方式来取消事件冒泡
   window.event.cancelBubble = true;
}

下面是使用这个方法取消冒泡时间的例子：

<html>
<head>
<style type="text/css">
#div1{width:400px; height:400px; background:#ff0000;}
#div2{width:300px; height:300px; background:#ffff00;}
#div3{width:200px; height:200px; background:#ff00ff;}
#div4{width:100px; height:100px; background:#000000;}
</style>
<script>
	window.οnlοad=function(){
		var div1 = document.getElementById('div1');
		var div2 = document.getElementById('div2');
		var div3 = document.getElementById('div3');
		var div4 = document.getElementById('div4');
		
		div1.οnclick=function(e){
			console.log('div1');
			stopBubble(e);
		};
		div2.οnclick=function(e){
			console.log('div2');
			stopBubble(e);
		};
		div3.οnclick=function(e){
			console.log('div3');
			stopBubble(e);
		};
		div4.οnclick=function(e){
			console.log('div4');
			stopBubble(e);
		};
		
	};
	
	function stopBubble(e){
		  //一般用在鼠标或键盘事件上
		  if(e && e.stopPropagation){
		  //W3C取消冒泡事件
		  e.stopPropagation();
		  }else{
		  //IE取消冒泡事件
		  window.event.cancelBubble = true;
		  }
	  };
	
</script>
</head>

<body>
<div id="div1"><div id="div2"><div id="div3"><div id="div4"></div></div></div></div>
</body>
</html>

如果click方法里面不加stopBubble方法的话，效果是不一样的，大家去试试看吧。