点击区域外隐藏该区域,event.stopPropagation()

event.stopPropagation()

  • Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

点击区域外隐藏该区域Example:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta content="charset=utf-8" />
 5 <style type="text/css">
 6 .box {
 7     width:100px; 
 8     height:100px; 
 9     background:blue;
10 }
11 </style>
12 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
13 <script type="text/javascript">
14     $(function() {
15         $(document).click(function() {
16             $('.box').hide();
17         })
18         $('.box').click(function(event) {
19             event.stopPropagation();
20         })
21     });
22 </script>
23 </head>
24 <body>
25 <div class="box">box</div>
26 </body>
27 </html>

SEE ALSO

posted @ 2016-01-11 23:16  提佰萬  阅读(377)  评论(0编辑  收藏  举报