jquery点击div以外的区域触发事件 

 1 <html> 
 2 <head> 
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 4 <title>网页特效展示中心</title> 
 5 <style type="text/css"> 
 6 #testa,#testa2{position:relative;}
 7 #pop,#pop2 { width:100px; height:130px; position:absolute; left:0px; top:20px; border:solid red 1px;background:white; z-index:9999;} 
 8 </style> 
 9 </head>
10 
11 <body> 
12 <script type="text/javascript" src="cxx/jquery.min.js"></script> 
13 <script type="text/javascript"> 
14 function toggle(id)
15 {
16 var id = document.getElementById(id);
17 if(id.style.display == 'none')
18 {
19 id.style.display = 'block'
20 }
21 else
22 {
23 id.style.display = 'none';
24 }
25 }
26 
27 function dealBlankDivHide(e, id ,destinationid)
28 {
29 var target = $(e.target); 
30 if(target.closest("#"+id).length == 0){ 
31 var id = document.getElementById(destinationid);
32 if(id.style.display == 'block')
33 {
34 id.style.display = 'none'
35 }
36 } 
37 }
38 
39 $(function(){ 
40 $(document).bind("click",function(e){ 
41 dealBlankDivHide(e, 'testa','pop');
42 dealBlankDivHide(e, 'testa2','pop2');
43 }) 
44 })
45 
46 
47 </script> 
48 <span id="testa">
49 <a onclick="toggle('pop')">onclick</a>
50 <div id="pop" style="display:none;">
51 <input type="checkbox" name = "test1"/>test1
52 <input type="checkbox" name = "test2"/>test2
53 <input type="checkbox" name = "test3"/>test3
54 <input type="checkbox" name = "test4"/>test4
55 <input type="checkbox" name = "test5"/>test5
56 </div> 
57 <span>
58 <span id="testa2">
59 <a onclick="toggle('pop2')">onclick</a>
60 <div id="pop2" style="display:none;">
61 <input type="checkbox" name = "test1"/>test11
62 <input type="checkbox" name = "test2"/>test22
63 <input type="checkbox" name = "test3"/>test33
64 <input type="checkbox" name = "test4"/>test44
65 <input type="checkbox" name = "test5"/>test55
66 </div> 
67 <span>
68 </br>
69 fsdfsdfsfsfsdfsfddf</br>
70 fsdfsdfsfsfsdfsfddf</br>
71 fsdfsdfsfsfsdfsfddf</br>
72 fsdfsdfsfsfsdfsfddf</br>
73 fsdfsdfsfsfsdfsfddf</br>
74 fsdfsdfsfsfsdfsfddf</br>
75 
76 
77 </body> 
78 </html>

 

posted @ 2017-04-03 09:38  chenxiangxiang  阅读(2983)  评论(0)    收藏  举报