contains()是判断节点是否属于某容器内部最轻量可靠的方法，语法为parent.contains(child)，支持自身及所有后代节点判定，IE8需用compareDocumentPosition回退。
直接用 contains() 判断节点是否属于某个容器内部，是前端交互中最轻量、最可靠的手段之一。它不依赖事件冒泡路径，也不需要遍历父节点链，只要一次调用就能明确“是不是它的后代”——包括自己、子元素、孙子元素等所有层级。
核心规则：谁调用，谁是“容器”
语法始终是：parent.contains(child)。这里的 parent 是你怀疑“可能包含”的那个节点，child 是你要确认归属的目标节点。
- 如果
child === parent，返回 true（自身也算“被包含”） - 如果
child是parent的任意后代（哪怕嵌套 5 层），也返回 true - 如果
child在别的 DOM 树里（比如 iframe 内、shadow root 中、或完全无关的兄弟节点），返回 false
常见误用场景与避坑建议
很多逻辑出错，不是因为方法不会用，而是对“谁是 parent”理解偏差。
- 点击菜单外关闭弹层时，别写成
event.target.contains(menu)—— 应该是menu.contains(event.target) - 做拖拽范围校验，不要拿 document.body 去 contains 某个浮动面板，而应检查面板是否仍在指定容器内：
dropZone.contains(draggedEl) - 动态插入内容后立即判断，确保节点已挂载：
if (container.contains(newNode)) { ... }，否则可能返回 false（即使刚 append 过）
兼容性处理：老浏览器也能用
IE8 及更早版本不支持 Node.contains()，但可通过 compareDocumentPosition 回退：
AI舌诊面诊问诊医疗系统+诊疗商城系统源码
下载
AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。
（推荐封装为工具函数）
function isDescendant(parent, child) {
if (parent.contains) return parent.contains(child);
return !!(parent.compareDocumentPosition &&
parent.compareDocumentPosition(child) & 16);
}
注意：这个回退方案在 IE9+、Firefox、Chrome、Safari 全系都稳定可用，无需额外 polyfill。
和事件委托配合更高效
在复杂列表或卡片组件中，不必给每个子项绑定 click，只需监听父容器，再用 contains() 快速过滤目标：
- 监听
listContainer.addEventListener('click', e => {...}) - 在回调里写
if (deleteBtn.contains(e.target)) { handleDelete(...) } - 比反复匹配 class 名或 tagName 更精准，也比
e.target.closest('.delete-btn')少一次 DOM 查找
