什么时候用阻止事件冒泡？
例如：document上有A事件，div有B事件，div里面的span有C事件，如果不给span和div加阻止事件冒泡的话，点击span时就会触发到div的B事件、document的A事件，当点击span时不想触发div和document的事件就要加上阻止事件冒泡，div也是一样的道理。
例子：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #btn{position:relative;} div{position:absolute;top:40px;left:10px;width:200px;height:200px;display:none;background:#000;} div a{color:#FFF;} </style> <script> window.onload=function() { var oBtn=document.getElementById('btn'); var oDiv=document.getElementById('div'); var oClose=document.getElementById('close'); oBtn.onmouseover=function() { oDiv.style.display='block'; }; oDiv.onclick=function(ev) { var oEvent=ev||event; oDiv.style.display='block'; oEvent.cancelBubble=true; }; oClose.onclick=function(ev) { var oEvent=ev||event; oDiv.style.display='none'; oEvent.cancelBubble=true; }; document.onclick=function() { oDiv.style.display='none'; }; }; </script> </head> <body> <input id="btn" type="button" value="划过我就弹出" /> <div id="div"> <a id="close" href="javascript:">关闭</a><br /><br /> <input type="input" /><br /> <input type="button" value="提交" /> </div> </body> </html>
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #btn{position:relative;} 8 div{position:absolute;top:40px;left:10px;width:200px;height:200px;display:none;background:#000;} 9 div a{color:#FFF;} 10 </style> 11 <script> 12 window.onload=function() 13 { 14 var oBtn=document.getElementById('btn'); 15 var oDiv=document.getElementById('div'); 16 var oClose=document.getElementById('close'); 17 18 oBtn.onmouseover=function() 19 { 20 oDiv.style.display='block'; 21 }; 22 23 oDiv.onclick=function(ev) 24 { 25 var oEvent=ev||event; 26 oDiv.style.display='block'; 27 oEvent.cancelBubble=true; 28 }; 29 30 oClose.onclick=function(ev) 31 { 32 var oEvent=ev||event; 33 oDiv.style.display='none'; 34 oEvent.cancelBubble=true; 35 }; 36 37 document.onclick=function() 38 { 39 oDiv.style.display='none'; 40 }; 41 }; 42 </script> 43 </head> 44 45 <body> 46 <input id="btn" type="button" value="划过我就弹出" /> 47 <div id="div"> 48 <a id="close" href="javascript:">关闭</a><br /><br /> 49 <input type="input" /><br /> 50 <input type="button" value="提交" /> 51 </div> 52 </body> 53 </html>