http://www.cnblogs.com/52css/p/3224809.html
什么时候用阻止事件冒泡
什么时候用阻止事件冒泡?
例如:document上有A事件,div有B事件,div里面的span有C事件,如果不给span和div加阻止事件冒泡的话,点击span时就会触发到div的B事件、document的A事件,当点击span时不想触发div和document的事件就要加上阻止事件冒泡,div也是一样的道理。
例子:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
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>