第55天：簡單冒泡方法原理

半指溫柔樂發表於2017-10-16

一、冒泡原理

事件冒泡: 當一個元素上的事件被觸發的時候，比如說滑鼠點選了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。

順序

E 6.0:

div -> body -> html -> document

其他瀏覽器:

div -> body -> html -> document -> window

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload

二、 阻止冒泡的方法

 標準瀏覽器 和  ie瀏覽器  

 w3c的方法是event.stopPropagation()       

 IE則是使用event.cancelBubble = true      

 相容的寫法：

  if(event && event.stopPropagation)

         {

             event.stopPropagation();  //  w3c 標準

         }

        else

        {

           event.cancelBubble = true;  // ie 678  ie瀏覽器

  }

三、判斷當前物件

   火狐 谷歌 等   event.target.id   

   ie 678          event.srcElement.id    

   相容性寫法：  

  var targetId = event.target ? event.target.id : event.srcElement.id;

   targetId != “show”  

四、案例：點選空白處隱藏盒子

  這個案例就是說，一個盒子，點選除了自己之外的任何一個地方，就會隱藏。

 原理：   

      點選自己不算 

      點選空白處 就是點選  document  

 

 

案例程式碼如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>點選空白處隱藏盒子</title>
 6     <style>
 7         body{
 8             height: 2000px;
 9         }
10         #mask{
11             width: 100%;
12             height: 100%;
13             opacity:0.4;/*半透明  標準瀏覽器*/
14             filter: alpha(opacity=40);/*IE6半透明*/
15             background-color: black;
16             position: fixed;
17             top:0;
18             left:0;
19             display: none;
20         }
21         #show{
22             width: 300px;
23             height: 300px;
24             background-color: #fff;
25             position: fixed;
26             top: 50%;
27             left: 50%;
28             margin-top: -150px;
29             margin-left: -150px;
30             display: none;
31         }
32     </style>
33 </head>
34 <body>
35     <a href="javascript:;" id="login">註冊</a>
36     <a href="javascript:;">登入</a>
37     <div id="mask"></div>
38     <div id="show"></div>
39 </body>
40 </html>
41 <script>
42     function $(id){return document.getElementById(id);}
43     var login=document.getElementById("login");
44     login.onclick=function(event){
45         $("mask").style.display="block";
46         $("show").style.display="block";
47         document.body.style.overflow="hidden";//不顯示滾動條
48         //取消冒泡
49         var event=event||window.event;
50         if(event&&event.stopPropagation){
51             event.stopPropagation();
52         }else{
53             event.cancelBubble=true;
54         }
55 
56     }
57     document.onclick=function(event){
58         var event=event||window.event;
59         //alert(event.target.id);//返回的是點選的某個物件的id 標準
60         //alert(event.srcElement.id);//IE6 7 8
61         var targetId=event.target ? event.target.id : event.srcElement.id;//相容性寫法
62         if(targetId!="show"){//不等於當前點選的名字
63             $("mask").style.display="none";
64             $("show").style.display="none";
65             document.body.style.overflow="visible";//顯示滾動條
66         }
67     }
68 </script>

 


相關文章