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('單擊了藍色的');
}
}