javascript事件冒泡

      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.onclick=fn1;
	    	   div2.onclick=fn2;
	    	   div3.onclick=fn3;
	    	}
	    </script>
	</head>
	<body>
       <div class="out" id="div1">
       	  <div class="middle" id="div2">
       	  	 <div class="inner" id="div3">
       	  	 	
       	  	 	
       	  	 </div>
       	  	
       	  </div>
       </div>
	</body>
</html>




你可能感兴趣的:(javascript事件冒泡)