实现点击外部关闭组件时出现异常行为的原因排查

问题本质：事件冒泡的同步执行冲突 #

点击触发组件显示的按钮时，事件流程是同步完成的：

1. 按钮的click事件触发，执行显示组件的逻辑，组件完成挂载。
2. 组件挂载后立即同步给根元素添加点击监听器。
3. 但按钮的click事件还处于冒泡阶段，会继续向上传递到根元素，刚添加的监听器直接捕获到这个事件。
4. 监听器判断点击目标（按钮）不属于组件后代，随即触发关闭逻辑，导致组件刚显示就消失。

setTimeout生效的原因 #

setTimeout会把添加监听器的操作推迟到下一个事件循环周期执行。此时按钮的click事件已经走完整个冒泡流程，后续的外部点击才会被监听器捕获，不会触发误关闭。

更合理的替代方案 #

不需要依赖定时器，有两种更规范的处理方式：

• 在按钮的点击事件中调用event.stopPropagation()，阻止事件向上冒泡到根元素。
• 在根元素的点击监听器中，先判断事件目标是否是触发按钮，若是则跳过关闭逻辑。

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