JavaScript中如何判断event.currentTarget是否包含event.target？

你需要的判断逻辑可以直接用DOM原生的Node.contains() API实现，这个方法会返回布尔值，表示传入的节点是否为该节点的后代节点，节点自身也会被判定为包含，完全匹配你的场景需求。

核心校验代码 #

直接在事件回调里加一层判断即可，以失焦场景为例：

function handleBlur(event) {
  const { currentTarget, target } = event;
  // 事件触发在绑定元素本身/其子元素上时，跳过误触发的逻辑
  if (currentTarget.contains(target)) {
    return;
  }
  // 下方写真正的失焦业务逻辑，比如表单校验、弹层关闭等
  console.log('焦点真正离开组件范围，执行对应逻辑');
}

// 绑定事件（推荐用支持冒泡的focusout代替不冒泡的blur，更适合组件场景）
const componentRoot = document.querySelector('#your-component');
componentRoot.addEventListener('focusout', handleBlur);

注意事项 #

• 不要用target === currentTarget做判断，这种写法只能识别触发元素就是绑定元素本身的场景，所有子元素触发的事件都会被误判为组件外触发，达不到过滤效果。
• 如果你需要兼容IE8及更早版本的浏览器，可以补充一层兼容逻辑：

function checkContains(parent, child) {
  if (parent.contains) return parent.contains(child);
  // 向上遍历DOM树做兜底判断
  while (child) {
    if (child === parent) return true;
    child = child.parentNode;
  }
  return false;
}

• 这个判断逻辑不止可以用在失焦场景，点击外部关闭弹层、全局交互拦截等场景都可以通用。

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