点击toggle element展开flyout后点击窗口空白处关闭的实现方法

核心逻辑是监听全局点击事件，判断点击目标是否属于浮层或者触发浮层的按钮区域，两者都不属于时就触发关闭逻辑，入门级实现步骤和代码如下：

实现步骤 #

• 给全局document对象绑定click事件监听器，每次触发时先判断浮层是否处于展开状态，未展开时直接跳过逻辑减少性能消耗
• 用Element.contains()方法校验两个条件：点击目标是否是触发浮层的toggle卡片的子元素、点击目标是否是flyout浮层的子元素
• 两个条件都不满足时，调用你现有逻辑里的浮层关闭方法即可
• 特别注意要在toggle的点击事件里加e.stopPropagation()阻止事件冒泡，否则会出现点击toggle刚展开浮层就立刻被关闭的问题

可直接运行的示例代码 #

<!-- 触发浮层的卡片元素 -->
<div class="card-toggle">点击卡片展开浮层</div>
<!-- flyout浮层元素 -->
<div class="flyout" style="display: none; position: fixed; top: 20%; left: 50%; transform: translateX(-50%); padding: 20px; background: #fff; border: 1px solid #eee;">
  浮层内部内容
  <button class="flyout-close">内部关闭按钮</button>
</div>

// 获取DOM元素
const cardToggle = document.querySelector('.card-toggle')
const flyout = document.querySelector('.flyout')
const closeBtn = document.querySelector('.flyout-close')

// 原有点击卡片切换浮层逻辑
cardToggle.addEventListener('click', (e) => {
  e.stopPropagation() // 必须加，阻止事件冒泡到document
  flyout.style.display = flyout.style.display === 'block' ? 'none' : 'block'
})

// 原有浮层内部关闭按钮逻辑
closeBtn.addEventListener('click', () => {
  flyout.style.display = 'none'
})

// 新增点击外部关闭逻辑
document.addEventListener('click', (e) => {
  // 仅浮层展开时执行判断
  if (flyout.style.display === 'block') {
    const isClickToggle = cardToggle.contains(e.target)
    const isClickFlyout = flyout.contains(e.target)
    // 既没点toggle也没点浮层内部，就关闭
    if (!isClickToggle && !isClickFlyout) {
      flyout.style.display = 'none'
    }
  }
})

适配多卡片场景的拓展说明 #

如果是卡片列表有多个独立flyout的场景，可以给每个卡片和对应的flyout添加data-flyout-target自定义属性做关联，循环绑定事件即可，核心判断逻辑不需要修改。

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