首页 > 代码库 > 对于指定区块div,如何区分区块内的点击 和 区块外的点击?

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

  需求:对于区块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>