event事件3

<div id="outer">
			<div id="middle">
				<div id="inner"></div>
			</div>
		</div>

　　

#outer{
				400px;
				height:400px;
				background:red;
				overflow:hidden;
			}
			#middle{
				overflow:hidden;
				300px;
				height:300px;
				margin-top:50px;
				background:green;
			}
			#inner{
				overflow:hidden;
				200px;
				height:200px;
				margin-top:50px;
				background:yellow;
			}

　　

<script type="text/javascript">
			function stopProp(e){
				var event = event||window.event;//前者event兼容非ie  后者兼容ie
　　　　　　　　　　　　　　　　　　//阻止冒泡
				if(event.stopPropagation){
					event.stopPropagation()
				}else{
					event.cancelBubble = true;
				}
			}
			
//			outer.onclick =function(e){
//				stopProp(e);
//				alert(1);
//			}
//			middle.onclick = function(e){
//				stopProp(e);
//				alert(2);
//			}
//			inner.onclick = function(e){
//				stopProp(e);
//				alert(3);
//			}

			outer.addEventListener("click",function(){alert(1)},true);
			middle.addEventListener("click",function(){alert(2)},false);
			inner.addEventListener("click",function(){alert(3)},true);
		</script>