zoukankan      html  css  js  c++  java
  • 点击页面其他地方隐藏div

    隐藏一个div通常来讲是比较简单的,而点击页面其他地方隐藏div就要注意一下事件冒泡了。事件冒泡指的是,点击子类的会连带的触发父类的的事件,从而造成不必要的联动。

    cancelBubble:

    stopPropagation和cancelBubble的区别:

    第一种方法:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     6     <meta name="renderer" content="webkit">
     7     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     8     <title>点击页面其他地方隐藏div</title>
     9 </head>
    10 <style type="text/css">
    11 *{
    12     margin: 0;
    13     padding: 0;
    14 }
    15 img{
    16     border:0;
    17 }
    18 ol, ul ,li{list-style: none;}
    19 #btn01,#btn02{
    20     width: 100px;
    21     height: 30px;
    22     line-height: 30px;
    23     text-align: center;
    24     border-radius: 5px;
    25     background: #ff894c;
    26     color: #fff;
    27     display: block;
    28     text-decoration: none;
    29     margin: 30px 0 0 30px;
    30 }
    31 #show{
    32     width: 100px;
    33     height: 100px;
    34     background: #66cc00;
    35     margin: 0 auto;
    36 }
    37 
    38 </style>
    39 <body>
    40 
    41 <a id="btn01" href="javascript:;">按钮1</a>
    42 <a id="btn02" href="javascript:;">按钮2</a>
    43 <div id="show"></div>
    44 <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    45 <script type="text/javascript">
    46     function stopPropagation(e) {
    47             if (e.stopPropagation){
    48                  e.stopPropagation();
    49             }else{
    50                 e.cancelBubble = true;
    51             }
    52 
    53     }
    54 
    55     $(document).bind('click',function(){
    56     $('#show').css('display','none');
    57     });
    58 
    59     $('#show').bind('click',function(e){
    60     stopPropagation(e);
    61     });
    62 </script>
    63 
    64 </body>
    65 </html>
    View Code

    第二种方法:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     6     <meta name="renderer" content="webkit">
     7     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     8     <title>点击其他地方隐藏div</title>
     9 </head>
    10 <style type="text/css">
    11 *{
    12     margin: 0;
    13     padding: 0;
    14 }
    15 img{
    16     border:0;
    17 }
    18 ol, ul ,li{list-style: none;}
    19 #btn01,#btn02{
    20     width: 100px;
    21     height: 30px;
    22     line-height: 30px;
    23     text-align: center;
    24     border-radius: 5px;
    25     background: #ff894c;
    26     color: #fff;
    27     display: block;
    28     text-decoration: none;
    29     margin: 30px 0 0 30px;
    30 }
    31 #show{
    32     width: 100px;
    33     height: 100px;
    34     background: #66cc00;
    35     margin: 0 auto;
    36 }
    37 
    38 </style>
    39 <body>
    40 
    41 <a id="btn01" href="javascript:;">按钮1</a>
    42 <a id="btn02" href="javascript:;">按钮2</a>
    43 <div id="show"></div>
    44 <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    45 <script type="text/javascript">
    46     $(document).bind('click',function(e){
    47         var e = e || window.event; //浏览器兼容性
    48         var elem = e.target || e.srcElement;
    49         while (elem) { //循环判断至跟节点,防止点击的是div子元素
    50         if (elem.id && elem.id=='show') {
    51         return;
    52         }
    53         elem = elem.parentNode;
    54         }
    55 
    56     $('#show').css('display','none'); //点击的不是div或其子元素
    57     });
    58 </script>
    59 </body>
    60 </html>
    View Code

     文件下载地址:http://files.cnblogs.com/files/cyppi/test.zip

    最后,单身的盆友可以看看这个活动链接 http://www.cnblogs.com/cyppi/gallery/image/184448.html

  • 相关阅读:
    【微信开发之问题集锦】redirect_uri 参数错误
    调度算法之时间片轮转算法
    快速排序算法分析和实现
    单链表(c语言实现)贼详细
    调度算法之最短作业优先算法
    HDU1027
    HDU1753 (大正小数相加)
    HDU 1715 (大数相加,斐波拉契数列)
    HDU 1316 (斐波那契数列,大数相加,大数比较大小)
    HDU1047(多个大数相加)
  • 原文地址:https://www.cnblogs.com/cyppi/p/6723187.html
Copyright © 2011-2022 走看看