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

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

2024-07-02 00:06:56   226人阅读

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

 

　　

　　

 

 

 

 


联系
我们