http://jsfiddle.net/dtdxrk/nMNzT/embedded/result/
IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接受,然后逐级向上传播到较为不具体的节点.
简单点说就是给一个子元素绑定一个onclick事件 当点击的时候body也等于被点击了.
所以有时候需要阻止一下事件冒泡.
event.bubbles 表明事件是否冒泡
event.cancelable 表明是否可以取消事件的默认行为
1 <!DOCTYPE HTML> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Js阻止事件冒泡 弹出层后点击body区域层消失 </title> 6 <style type="text/css"> 7 body{background-color: #eee;} 8 div#box { background-color: #fff;border: 5px solid #000; width: 300px; height: 100px;display: none;} 9 10 </style> 11 </head> 12 13 <body> 14 <input id="bt" type="button" value="点击弹出div" /> 15 <div id="box"> 16 <ul> 17 <li><span>css</span></li> 18 <li><span>html</span></li> 19 <li><span>js</span></li> 20 </ul> 21 </div> 22 23 24 <script type="text/javascript"> 25 document.getElementById("bt").onclick = function(){ 26 document.getElementById("box").style.display = "block"; 27 } 28 29 document.getElementById("box").onclick = function(e){ 30 e = e || window.event; 31 if(window.event){ //阻止事件冒泡 32 e.cancelBubble = true; 33 } else { 34 e.stopPropagation(); 35 } 36 } 37 38 document.body.onclick = function(e){ 39 e = e || window.event; 40 var target = e.target || e.srcElement; 41 if(target.id === "box" || target.id === "bt") { 42 return; 43 } else { 44 document.getElementById("box").style.display = "none"; 45 } 46 } 47 </script> 48 49 50 </body> 51 </html>