javascript事件冒泡

最新推荐文章于 2024-07-08 08:31:14 发布

shizhan1881

最新推荐文章于 2024-07-08 08:31:14 发布

阅读量654

点赞数

分类专栏： javascript 文章标签： javascript div function class html 浏览器

本文链接：https://blog.csdn.net/linshizhan/article/details/7722503

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

javascript中的事件有冒泡性质，例如div1里面嵌套div2，div2嵌套div3，当我们为div3注册鼠标点击事件的时候，div2和div1的鼠标点击事件处理函数也会相应触发。

如果我们想阻止事件冒泡（ie中的叫法）或者事件传播（火狐中的叫法），可以使用

event.canelBubble =true;（ie中的方法），e.stopPropagation();（火狐中的方法），可以用以下一行代码兼容浏览器：

	if(document.attachEvent)
	    		{
	    		    event.canelBubble =true;
	    		}
	    		else
	    		{
	    		    e.stopPropagation();
	    		}

下面是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <style type="text/css">
	    	div.out{
	    		background-color: blue;
	    		width:600px;
	    		height:600px;
	    		position:relative;
	    	}
	    	div.middle{
	    		background-color: yellow;
	    		width:400px;
	    		height:400px;
	    		position:absolute;
	    		top:100px;
	    		left:100px;
	    	}
	    	div.inner{
	    	    background-color: green;
	    		width:250px;
	    		height:250px;
	    		position:absolute;
	    		top:100px;
	    		left:100px;
	    	}
	    </style>
	    
	    <script type="text/javascript">
	    	function fn1()
	    	{
	    		alert("我是老大");
	    	}
	    	function fn2()
	    	{
	    		alert("我是老二");
	    	}
	    	function fn3()
	    	{
	    		alert("我是老三");
	    	}
	    	window.onload =function()
	    	{
	    	   var div1 = document.getElementById("div1");
	    	   var div2 = document.getElementById("div2");
	    	   var div3 = document.getElementById("div3");
	    	   div1.οnclick=fn1;
	    	   div2.οnclick=fn2;
	    	   div3.οnclick=fn3;
	    	}
	    </script>
	</head>
	<body>
       <div class="out" id="div1">
       	  <div class="middle" id="div2">
       	  	 <div class="inner" id="div3">
       	  	 	
       	  	 	
       	  	 </div>
       	  	
       	  </div>
       </div>
	</body>
</html>