<div id="outer">
<div id="middle">
<div id="inner"></div>
</div>
</div>
#outer{
width:400px;
height:400px;
background:red;
overflow:hidden;
}
#middle{
overflow:hidden;
width:300px;
height:300px;
margin-top:50px;
background:green;
}
#inner{
overflow:hidden;
width: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>