Js阻止事件冒泡 弹出层后点击body区域层消失

效果预览:

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>
posted @ 2012-07-09 18:17  dtdxrk  阅读(1836)  评论(0)  编辑  收藏  举报