<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#main{ width:200px; height:200px; background:#ccc;}
#subBox{ width:100px; height:100px; background:red;}
</style>
<script>
window.οnlοad=function(){
var main=document.getElementById('main');
var subDiv=document.getElementById('subBox');
main.οnclick=function(){
console.log("main");
};
subDiv.οnclick=function(ev){//事件对象
ev=ev||window.event;
//在子元素上阻止冒泡,这里如果不阻止,console.log()方法既会打印“main”,也会打印“subDiv”。
ev.cancelBubble=true; //阻止冒泡 IE的方法, 其他浏览器全支持
//ev.stopPropagation(); //w3c Propagation:传播
console.log("subDiv");
}
}
</script>
</head>
<body>
<div id="main">
<div id="subBox"></div>
</div>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#main{ width:200px; height:200px; background:#ccc;}
#subBox{ width:100px; height:100px; background:red;}
</style>
<script>
window.οnlοad=function(){
var main=document.getElementById('main');
var subDiv=document.getElementById('subBox');
main.οnclick=function(){
console.log("main");
};
subDiv.οnclick=function(ev){//事件对象
ev=ev||window.event;
//在子元素上阻止冒泡,这里如果不阻止,console.log()方法既会打印“main”,也会打印“subDiv”。
ev.cancelBubble=true; //阻止冒泡 IE的方法, 其他浏览器全支持
//ev.stopPropagation(); //w3c Propagation:传播
console.log("subDiv");
}
}
</script>
</head>
<body>
<div id="main">
<div id="subBox"></div>
</div>