需求：对于区块div内点击事件， 需要展示区块内的附属操作区块，对于区块外的点击， 需要将前面说的附属操作区块隐藏掉。
分析：对于一般的HTML控件，有标准的js事件接口， focus和blur，来实现类似效果， 在focus中添加显示附属控件操作， 在blur中隐藏掉。例如 文本输入框， 和 image 类型的input， 但是对于设计出的样式不能通过这类控件来表达时候，就需要使用div框来设计布局，虽然HTML控件具有更好的accessibility。
技术思路：事件event在DOM树中是不断冒泡，向上层传递的，直到DOM根节点document停止，在事件发生或者传递的过程中， 任意传递路径上的DOM元素的事件处理函数， 中都可以终止事件扩散（propagation）。
验证冒泡传递消息机制，如下代码，执行效果，点击“click me”，事件踪迹会先打印 me is clicked，然后打印document is clicked。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 5 </script> 6 </head> 7 <body> 8 <div id="target_div" style="200px;height:200px;background:yellow;margin:auto">click me</div> 9 <br/> 10 <br/> 11 <br/> 12 clicked event bubble up trace: 13 <div id="eventClickLog"></div> 14 <script> 15 $("#target_div").click(function(event){ 16 $("<div/>").append("me is clicked") 17 .appendTo($("#eventClickLog")); 18 }); 19 20 $(document).click(function(event){ 21 $("<div/>").append("document is clicked") 22 .appendTo($("#eventClickLog")); 23 }); 24 </script> 25 </body> 26 </html>
根据JQuery官方文档 http://api.jquery.com/event.stoppropagation/ 介绍 如下接口可以prevent事件向上传递
event.stopPropagation()
或者使用 return false 来实现相同的效果，这样点击区块内，只有打印 me is clicked， 点击区块外，只打印document is clicked，可满足区分区块点击事件区域的需求。给出拦截效果代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 5 </script> 6 </head> 7 <body> 8 <div id="target_div" style="200px;height:200px;background:yellow;margin:auto">click me</div> 9 <br/> 10 <br/> 11 <br/> 12 clicked event bubble up trace: 13 <div id="eventClickLog"></div> 14 <script> 15 $("#target_div").click(function(event){ 16 $("<div/>").append("me is clicked") 17 .appendTo($("#eventClickLog")); 18 19 /* return false or stopPropagation to prevent parent event handler executed. */ 20 //return false; 21 event.stopPropagation(); 22 }); 23 24 $(document).click(function(event){ 25 $("<div/>").append("document is clicked") 26 .appendTo($("#eventClickLog")); 27 }); 28 </script> 29 </body> 30 </html>