点击一个div其他地方关闭这个div并且不使这个div失效

首先我们需要知道，页面的遍历是通过标签冒泡遍历的，如果说我们有一个页面body，里面有一个标签div

使这个div在点击其他地方关闭，但是点击这个div内部关闭。这时候我们经常会用到一个叫做停止事件，代码如下：

    function stopPropagation(e) {
        if (e.stopPropagation) 
          e.stopPropagation();//停止冒泡  非ie
        else
          e.cancelBubble = true;//停止冒泡 ie
      }

我们一般可以设定一个事件，当遍历到这个节点停止事件，那么自然就能做到

$("#div").on("click", function(e){
    e.stopPropagation();
});

但是如果这个class为div下还有一个button按钮呢

停止事件就意味着button这个按钮也失效了

所以我们还需要用另一种方法

function hideDiv(e){
        var e = e || window.event; //浏览器兼容性   
                var elem = e.target || e.srcElement;  
                while (elem) { //循环判断至跟节点，防止点击的是div子元素   
                    if ($(elem).hasClass("div")) {  
                        return;  
                    }
                    elem = elem.parentNode; 
                  }  
                 $(".div").css("display","none"); }

假如class为div下还有一个class为button的标签

这时候我们可以用上面所述的方法

 使用return终止函数的运行，然后反向循环直到停止

转载于:https://www.cnblogs.com/zhengyuanyuan/p/8445220.html