jquery实现某个对象(div)外任意点击隐藏对象

   在某个div上绑定了一个click事件，点击则显示一个div，点击其他地方则隐藏显示出来的div。

   涉及到了js冒泡和事件的响应，参考了下面的文章进行了实现。http://www.cnblogs.com/dolphinX/p/3239530.html

  点击显示div

   $(“#test”).bind('click',function(e){
                 $(".showInfo").show();
     });

   实现其他位置点击隐藏：

 $(document).bind('click',function(e){
         var e = e || window.event; //浏览器兼容性 不大明白e = e
         var elem = e.target || e.srcElement;//获取选中对象
         while (elem) { //循环判断至跟节点，防止点击的是div子元素
             if (elem.id && elem.id=='test') {
                 return;//如果是test对象则直接结束，不隐藏对象。test的click事件先于此代码执行
             }
             elem = elem.parentNode;
         }
         $(".showInfo").hide();
     });

如果在test的子对象中有一个或者多个链接，点击的时候需要不能触发显示div事件，可在test点击事件中加入类似代码

function showAlarmDetail(id)
{
  var e = window.event;
     var elem = e.target || e.srcElement;
     while (elem) { 

         if (elem.className && elem.className=='dbButton') {//判断的是class名称
             return;//如果class=dbButton则不显示隐藏对象
         }
         elem = elem.parentNode;
     }
 $(".showInfo").show();
}

 

关于js冒泡和事件捕获执行的顺序还很疑惑，继续学习~