前言

若是我说会有此文又是因为一次面试的话，我自己都不知道该怎么形容我的心情了，好似我的所有动力皆来自于面试似的。

其实不是这样的，我原来一个项目经理对我说，隔一两个月出去面试下，一来你会知道自己的不足知道怎么提高，二来你就知道自己涨价没。

现在回想起来他说的是很对的，面对这次的团队解散，我反而不那么着急，因为我不太惧怕面试，走到哪里都能找到工作，当然这里没有鼓励大家出去面试的意思啦。

回到本文，当时面试官问了我一个问题，我当时就支支吾吾的答不上来，其实细细思考的话这道题还是有点意思的：

在一个div上画div（绝对定位），然后再在刚刚那个div里面（上面更合适）画一个div，现在去拖到div，你知道你拖动的是哪个div吗？

说这道题本身并不难绝对是骗人的（反正时至今日我都有点没底...），说他难，他又没有难到哪里去，每个人都知道是事件冒泡相关的东西。

还是那句话知道不等于了解，了解不等于深入，皮毛说不清楚事情，今天让我们带着问题一起学习吧！

由于本文是边学边写的，可能会有点乱，可能会有我的唧唧歪歪请各位大哥见谅。

基础知识

刀不磨不亮，我们先从基础来，这里就直接忽略IE的attachEvent了吧，我们说下标准的就是，请看以下代码（这里我确实没脸再用jquery了，原生吧）：

基础事件绑定

 1 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2  3  4      5  6  7     
 8          9     
10     19 20 

我们看到点击按钮后，执行点击事件，其中this便是对应元素，e包含了许多有用信息比如：

阻止冒泡（e.stopPropagation();）、阻止浏览器默认事件（e.preventDefault();）、当前点击元素、鼠标位置......

好，我们在此基础上做一个扩展，我们多增加两个元素，然后给document绑定事件，最后看看我们点击的是哪个：

 1  2     
 3          4         
 5             
 6             
 7             
 8         
 9         安能辨我是雄雌10     
11     18 

现在我不论点击哪个标签皆会将其标签名字打印出来，请在s=''处设置断点查看：

于是我突然感觉知道了什么，又不能确认，所以我们都不敲板，来捋一捋：

1 我们为根元素绑定点击事件2 我们点击按钮后，按钮并没有事件处理，所以将事件向上传递，直到document
3 document是绑定了事件的，所以触发了事件，其中this指向document，但是e中的当前点击元素却是按钮

好，先将一切暂停，我们来做一个很土的选项卡：

丑陋的选项卡

 1 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2  3  4      5     16 17 18     
19         
20             
选项卡1
21             
选项卡2
22             
选项卡3
23         
24         
25         内容区域26         
27     
28     32 33 

若是现在需要完成一个简单功能，点击每个选项卡，内容区域文字便会变成选项卡的标签文字你会怎么做呢？

很多年以前，我会使用jquery的标签选择器为每个li添加事件，我确信我会这样做，这样做有几个问题：

1 事件绑定过多

2 动态添加li标签的话，是不具备事件的

于是这里我们就可以用到前面的事件冒泡机制啦：

选项卡代码完整版

 1 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2  3  4      5     16 17 18     
19         
20             
选项卡1
21             
选项卡2
22             
选项卡3
23         
24         
25         内容区域26         
27     
28     36 37 

根据这个例子，我相信，各位都对事件冒泡有一个认识了，我们继续。

绝对定位·乱了的一切

这里会说到绝对定位，只是因为他比较特殊，其实漂浮、元素之间重叠都有可能让我们的冒泡变得复杂，先上代码：

复杂的情况

 1 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2  3  4      5     12 13 14     
15         d116         
17             d1_118         
19     
20     
21         d222     
23     
24         d325     
26     34 35 

现在各位还知道自己在干什么吗？？？这个将情况变的复杂，因为我们必须清晰的知道谁离我最近。

解决问题

到了解决问题的时候了，要不我们将最开始出现那道题做了吧？我们先规定一下做法，只能这样做哟：

1 给一个按钮给用户让用户选择现在是画矩形或者拖动矩形

2 在给定的一个div（相对定位）中画div，画的div（绝对定位）将append到父div里面

3 选择拖动div，便可在父层div中进行拖动了

4 不能为除父div以为的div添加事件！

5 可以使用jquery，可以暂时不考虑滚动条

怎么样简单吧，让我们动手吧：

为了方便各位拖到，我先上个图，然后再来一段丑陋的代码：

丑陋的代码

  1 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2   3   4       5      18  19  20     

 21         
• 画矩形框
 22         
• 拖到矩形框
 23     

大家去运行看看，就会发现问题了：

我们拖动1时，没有问题，但是当我们拖到0时，一旦碰到1就会出状况！！！

这是因为我们mousedown事件是绑定到了父div上，当我们鼠标点下时，便给个元素绑定了滑动事件，但是在1

上时，因为他离我们近，所以我们不会滑动到0上，。。。。滑动0时碰到1，鼠标自然就在1

上滑动了，所以拖动的就是1。。。。

我不知道各位晕不晕，我可能有点晕，今天暂时如此了。。。。

师兄讨论的结果

刚刚和师兄就这个问题做了一个讨论，他的意见还是很中肯的：

我们mousedown的时候便获取该元素，然后直接给该子元素绑定各种事件，mouseup后便把事件取消，便不会有以上问题了，

另外可能起z-index还需要进行设置，我这里就不管了：

师兄意见

  1 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2   3   4       5      18  19  20     

 21         
• 画矩形框
 22         
• 拖到矩形框
 23