什么时候用阻止事件冒泡?
例如: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>