iOS设备点击外部区域时CSS下拉菜单无法消失问题求解

这一问题本质是iOS Safari的事件触发机制限制：非可点击元素的点击事件默认不会冒泡到document根节点，导致原有判断点击区域外收起菜单的逻辑无法触发，可按需选用以下方案修复：

方案1：最简全局配置 #

直接给<body>标签添加空点击回调，让Safari将全页面识别为可点击区域，触发事件冒泡：

<body onclick="void(0)">

该方案和你之前给下拉菜单添加的onclick="void(0)"逻辑完全兼容，改造成本最低。

方案2：添加透明遮罩层 #

如果方案1会影响其他页面交互逻辑，可以在菜单展开时动态插入全屏透明遮罩：

• 遮罩层级设置为低于下拉菜单、高于其他页面内容
• 给遮罩添加onclick="void(0)"属性保证iOS下可触发点击
• 监听遮罩的点击事件，触发后执行菜单收起逻辑并移除遮罩

示例代码：

// 下拉菜单展开时执行
const dropdownMask = document.createElement('div');
dropdownMask.style.cssText = 'position: fixed; inset: 0; z-index: 998; background: transparent;';
dropdownMask.setAttribute('onclick', 'void(0)');
dropdownMask.addEventListener('click', () => {
  // 此处替换为你的菜单收起逻辑
  document.querySelector('.dropdown-menu').classList.remove('open');
  document.body.removeChild(dropdownMask);
});
document.body.appendChild(dropdownMask);

方案3：修复根节点事件监听 #

如果你的原有逻辑是通过绑定document的点击事件判断点击区域来收起菜单，可以做两处修改：

1. 给根节点添加指针样式，让Safari识别为可点击区域：

html {
  cursor: pointer;
}

2. 绑定document点击事件时添加passive: false配置：

document.addEventListener('click', (e) => {
  const menu = document.querySelector('.dropdown-menu');
  const trigger = document.querySelector('.dropdown-trigger');
  // 点击区域不在菜单和触发按钮内时收起
  if (!menu.contains(e.target) && !trigger.contains(e.target)) {
    menu.classList.remove('open');
  }
}, { passive: false });

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