第55天：简单冒泡方法原理
一、冒泡原理
事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017-10-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
