js 事件监听 冒泡事件 的取消
【自己写框架时,才有可能用到】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>事件编程</title>
<style type='text/css'> #div1 {
width:400px;
height:400px;
background:#ff0000;
}
#div2 {
width:300px;
height:300px;
background:blue;
}
#div3 {
width:200px;
height:200px;
background:yellow;
}
</style> <script>
//取消事件冒泡 //自己写框架时,才有可能用到
function stopBubble(event) {
if(window.event) {
window.event.cancelBubble = true;
} else {
event.stopPropagation();
}
}
window.onload = function() {
addEvent($('div1'),'click',function(){
alert('div1');
})
addEvent($('div2'),'click',function(event){
alert('div2');
stopBubble(event);
})
addEvent($('div3'),'click',function(event){
alert('div3');
stopBubble(event);
})
}
</script>
</head>
<body>
<div id='div1'>
<div id='div2'>
<div id='div3'></div>
</div>
</div>
</body>
</html>