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