阻止事件冒泡

Document

.box1{

height: 500px;

width:500px;

background:red;

}

.box2{

height: 300px;

width:300px;

background:green;

}

.box3{

height: 100px;

width:100px;

background:blue;

}

window.onload = function(){

var box1 = document.getElementsByClassName('box1')[0]

var box2 = document.getElementsByClassName('box2')[0]

var box3 = document.getElementsByClassName('box3')[0]

box1.onclick = function(e){

console.log('单击了红色的');

}

box2.onclick= function(){

console.log('单击了绿色');

}

box3.onclick=function(e){

//如果提供了事件对象，则这是一个非IE浏览器

if(e&e.stopPropagation)

//W3C的方法

e.stopPropagation();

else

//这是IE的方式

window.event.cancelBubble = true;

console.log('单击了蓝色的');

}

}