Nuxt.js移动端弹窗菜单在iOS Safari上的点击穿透问题

问题原因 #

iPhone Safari的点击穿透是因为其触摸事件机制和渲染特性：当全屏菜单以绝对/固定定位覆盖在页面内容上时，若菜单背景透明或层级处理不当，Safari会误判点击目标，触发下方的可交互元素（按钮、链接），而Android设备的触摸事件拦截逻辑相对更严谨，所以无此问题。

具体解决办法 #

1. 拦截页面内容的点击事件（最有效）

菜单展开时，给页面主容器添加pointer-events: none，同时确保菜单容器的pointer-events: auto，让菜单完全拦截所有点击事件，不会穿透到下方：

/* 菜单展开时的页面内容样式 */
.menu-open .page-content {
  pointer-events: none;
}

/* 全屏菜单基础样式 */
.mobile-menu {
  pointer-events: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: #ffffff; /* 必须设置不透明背景，透明区域仍会触发穿透 */
}

结合Vue动态绑定class控制状态：

<template>
  <div :class="{ 'menu-open': isMenuVisible }">
    <div class="page-content">
      <!-- 页面原有内容 -->
    </div>
    <div class="mobile-menu" v-show="isMenuVisible">
      <!-- 菜单项列表 -->
    </div>
  </div>
</template>

2. 增强触摸事件拦截

如果上述方法仍有残留问题，给页面内容容器额外添加触摸相关样式，彻底阻止触摸事件传递：

.menu-open .page-content {
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

3. 给菜单项绑定触摸拦截事件

在Vue菜单项上直接阻止触摸事件的默认行为和冒泡，确保点击只触发菜单项：

<template>
  <div 
    class="mobile-menu-item" 
    @click="handleMenuClick" 
    @touchstart.prevent
  >
    菜单项文本
  </div>
</template>

注：如果菜单项是链接，需在handleMenuClick中手动处理跳转逻辑，避免prevent拦截默认跳转行为。

4. 强制提升菜单层级

确认菜单的z-index远高于页面所有可交互元素，避免Safari渲染层级判断错误：

.mobile-menu {
  z-index: 99999; /* 数值确保比页面其他元素的z-index都高 */
}

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