JavaScript使用document.addEventListener关闭下拉菜单失效问题

问题现象 #

• 目标需求：点击页面body或下拉菜单外任意区域时，自动关闭展开的下拉菜单
• 初始实现：通过document.addEventListener绑定全局click事件编写判断逻辑，代码完全不生效
• 对照测试：新增id为container_test的div模拟body容器，通过document.getElementById("container_test").addEventListener将完全相同的判断逻辑绑定到该div上，功能可正常运行
• 待定位问题：直接将事件绑定到document上时功能失效的原因
• 相关代码：以下分别提供无法运行的问题代码、可正常运行的对照代码，所有代码片段、API名称、类名等技术标识均保持原有写法不变。

核心原因 #

90%以上的这类问题都是事件冒泡被截断导致的：
页面中下拉菜单的触发按钮、或者其他全局组件/业务代码，在自身的click事件回调里调用了event.stopPropagation()，点击事件冒泡到container_test层级时就被拦截，根本没有传递到document层级，绑定在document上的回调自然不会触发。
而把事件绑定在container_test上时，只要点击事件能冒泡到这个容器节点，绑定的回调就会执行——刚好页面里的阻止冒泡逻辑没有截断到这一层，所以功能可以正常跑通。

剩下的小概率原因有两个：

1. 绑定时机错误：document.addEventListener的代码执行时机过早，DOM还未完成渲染，或者后续有其他脚本主动解绑了document上的该click监听器；而绑定container_test的代码是在对应div渲染完成后执行，且没有其他脚本解绑这个元素上的事件，所以可以正常触发
2. 事件流配置错误：绑定document事件时addEventListener的第三个参数（捕获/冒泡阶段配置）和target判断逻辑不匹配，比如在冒泡阶段做元素归属判断，但事件在捕获阶段就被其他逻辑拦截处理，导致判断逻辑不执行

排查步骤 #

1. 先在document绑定的click回调最开头加console.log('document clicked')，点击页面看控制台是否有输出，先区分是回调根本没触发，还是回调触发了但下拉菜单的关闭判断逻辑写错了
2. 如果回调确实没触发，全局搜索代码里所有stopPropagation调用，在每个调用位置加日志，点击页面看是哪个元素的事件回调截断了冒泡路径
3. 检查document事件绑定代码的执行时机，确认在DOM加载完成后执行，且后续没有逻辑调用removeEventListener解绑对应回调

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