需求：对于区块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
时间： 2024-12-15 05:49:00