点击一个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终止函数的运行,然后反向循环直到停止