取消冒泡:event.cancelBubble=true
<script type="text/javascript">
var s1=document.getElementById("s1")
s1.onclick=function(event){
event.cancelBubble=true
alert("span")
}
var box=document.getElementById("box")
box.onclick=function(event){
event.cancelBubble=true
alert("box")
}
document.body.onclick=function(){
alert("body")
}
var box2=document.getElementById("box2")
box2.onclick=function(event){
//event.cancelBubble=true
event = event || window.event;
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
alert("box2")
}
</script>
<style type="text/css">
#box{width: 300px; height: 300px;background-color: greenyellow;}
#box2{width: 100px;height: 100px;background-color: red;}
span{background-color: yellow;}
</style>
<title></title>
</head>
<body>
<div id="box">
我是box1<span id="s1">我是span</span>
<div id="box2">我是box2
</div>
</div>
</body>