JavaScript中判断元素包含关系的contains方法应用-js教程-PHP中文网

contains 是 JavaScript 判断 DOM 元素是否为另一元素后代（含自身）的原生方法，返回布尔值，IE9+兼容，需传入有效元素节点，不跨 Shadow DOM。

javascript中判断元素包含关系的contains方法应用

contains 是 JavaScript 中用于判断一个 DOM 元素是否为另一个元素的后代（包括自身）的原生方法，返回布尔值。它简洁、高效，且兼容性好（IE9+），是处理父子、嵌套关系时最直接的选择。

基本用法与注意事项

调用形式为 parentElement.contains(childElement)，其中：

必须是两个有效的 DOM 元素节点（Node.ELEMENT_NODE），传入 null、文本节点、文档节点等会报错或返回 false；
如果 childElement 就是 parentElement 自身，也返回 true（即“包含自身”）；
不支持跨 Shadow DOM 边界检测（如需穿透 Shadow Root，需手动遍历或使用 composed: true 的事件路径辅助判断）。

常见实用场景

该方法在交互逻辑中高频出现，典型用例如下：

点击外部关闭弹窗：监听 document 点击，检查点击目标是否在弹窗容器内，不在则关闭；
拖拽/悬浮范围判定：判断鼠标移入的元素是否属于某个可拖区域的子结构；
菜单收起逻辑：点击后检查目标是否在菜单及其触发按钮内，否则隐藏菜单；
表单焦点管理：判断当前聚焦元素是否仍在某组表单项内部，以决定是否保留状态。

替代方案对比（为什么优先用 contains）

相比其他方式，contains 更可靠直观：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

不用依赖 parentNode 循环向上查找（易漏判、代码冗长）；
比正则匹配 outerHTML 或 class 名更准确（不受 HTML 结构变化或类名重复影响）；
比 compareDocumentPosition 更语义清晰（后者需位运算判断，可读性差）；
比第三方库（如 jQuery 的 .has()）更轻量，无额外依赖。

简单示例：点击非弹窗区域时关闭

假设弹窗容器为 #popup，绑定全局点击事件：

document.addEventListener('click', function (e) {
  const popup = document.getElementById('popup');
  if (!popup.contains(e.target)) {
    popup.classList.remove('show');
  }
});

注意：若弹窗含按钮等可交互子元素，该写法天然兼容——因为按钮属于 popup 的后代，contains 仍返回 true，不会误关。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南