对于指定区块div，如何区分区块内的点击和区块外的点击？

时间：2014-04-29 16:32:21 收藏：0 阅读：481

　　需求：对于区块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="width: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="width: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>

对于指定区块div，如何区分区块内的点击和区块外的点击？,码迷,mamicode.com

对于指定区块div，如何区分区块内的点击 和 区块外的点击？

event.stopPropagation()

对于指定区块div，如何区分区块内的点击和区块外的点击？