点击Dropdown下拉菜单外部无法隐藏且点击按钮无法唤起问题排查

两个逻辑缺陷导致下拉无法正常展示：

• 事件冒泡冲突：按钮绑定的点击事件先执行，给下拉加上显示类，之后点击事件冒泡到window触发全局监听，刚打开的下拉立刻被关闭，视觉上完全看不到展开效果。
• 元素匹配逻辑错误：event.target.matches('.ellipsis-btn') 仅校验点击的最底层元素本身是否为按钮，若按钮内部嵌套图标、文本节点等子元素，点击时命中的是子元素，判断条件就会误判为点击了外部区域，触发关闭逻辑。同时原有逻辑没有排除下拉内容区域，后续即使下拉能打开，点击菜单内部选项也会被误关。

直接替换你写的全局点击监听代码即可，不需要改动原有按钮的点击切换逻辑：

window.addEventListener('click', function(event) {
  // 校验点击位置是否在按钮或下拉内容范围内
  const isClickInDropdownArea = event.target.closest('.ellipsis-btn') || event.target.closest('.ellipsis-content');
  if (!isClickInDropdownArea) {
    // 批量关闭所有处于展开状态的下拉
    document.querySelectorAll('.ellipsis-content.d-block').forEach(openDropdown => {
      openDropdown.classList.remove('d-block');
    })
  }
})

说明：closest()方法会从当前点击元素开始向上遍历DOM节点，只要元素本身或任意父级匹配传入的选择器就会返回匹配节点，既解决了按钮内部嵌套子元素的判断失效问题，也避免了点击下拉菜单内部时被误判为外部点击的问题。用addEventListener绑定事件也不会覆盖页面上其他全局点击逻辑，兼容性更好。

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