点击指定div及其子元素外部时移除类的jQuery实现问题

嘿，我懂你踩的这个坑！你原来的代码里e.target指向的是实际被点击的那个子元素，不是父div本身，所以$(e.target).is(parentDiv)会返回false，导致哪怕点在父div内部的子元素上，也会触发移除类的操作，这完全不是你想要的效果。

要解决这个问题，我们需要判断点击的元素是否处于parentDiv的范围内（包括父div自己），只有点击外部区域时才执行移除操作。这里有两个简单好用的方案：

方案一：用jQuery的closest()方法 #

这是最常用的jQuery写法，逻辑直观易懂：

$(document).on('click', function(e) {
  // 从点击元素向上遍历寻找parentDiv，找不到就执行移除操作
  if ($(e.target).closest(parentDiv).length === 0) {
    otherDiv.removeClass();
  }
});

原理：closest(parentDiv)会从当前点击的元素开始，向上遍历整个DOM树，寻找匹配的父元素。如果点击的是父div本身或者它的任意子元素，这个方法都会找到对应的父div，返回的集合长度为1；只有点击外部元素时，长度才会是0，此时才会触发removeClass。

方案二：用原生DOM的contains()方法 #

如果追求一点性能优化的话，原生DOM方法会更高效：

$(document).on('click', function(e) {
  // 直接判断父div是否包含点击的目标元素
  if (!parentDiv[0].contains(e.target)) {
    otherDiv.removeClass();
  }
});

原理：parentDiv[0]把jQuery对象转换成原生DOM元素，然后用原生的contains()方法直接判断这个父元素是否包含点击的目标元素。如果不包含（也就是点击了外部区域），就执行移除类的操作。

小提醒：确保parentDiv是你已经正确获取到的jQuery对象哦，比如$('#your-parent-div-id')，不然判断逻辑会失效~

内容的提问来源于stack exchange，提问作者dungey_140