iOS Safari中移动端菜单addEventListener点击及触摸事件均失效问题

问题根因 #

该兼容性问题主要由iOS Safari的两个特有特性导致：

1. JS执行时机早于DOM渲染完成，导致未成功获取到汉堡按钮元素，事件监听绑定失效
2. 按钮内部的SVG元素会拦截点击事件，未正确冒泡到父级按钮元素

修复步骤 #

1. 确保JS在DOM加载完成后执行 #

将你的菜单逻辑包裹在DOMContentLoaded事件回调中，避免DOM未渲染完成时变量获取为null：

/* MOBILE MENU NAVBAR */
document.addEventListener('DOMContentLoaded', () => {
  // Grab HTML Elements
  const btn = document.querySelector(".mobile-menu-button");
  const menu = document.querySelector(".mobile-menu");
  // 判空避免控制台报错
  if (!btn || !menu) return

  const toggleMenu = (e) => {
    e.preventDefault()
    menu.classList.toggle("hidden");
  }
  // 同时绑定两类事件覆盖Safari交互场景
  btn.addEventListener("click", toggleMenu);
  btn.addEventListener("touchstart", toggleMenu);
})
/* END OF MOBILE MENU NAVBAR */

2. 给SVG添加点击穿透属性 #

给按钮内的SVG元素添加pointer-events: none样式，让SVG不拦截点击事件，所有点击操作直接触发父级按钮的事件监听：

<svg
  class="w-6 h-6 text-gray-500"
  x-show="!showMenu"
  fill="none"
  stroke-linecap="round"
  stroke-linejoin="round"
  stroke-width="2"
  viewBox="0 0 24 24"
  stroke="currentColor"
  style="pointer-events: none;"
>
  <path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>

3. 可选优化：给按钮显式声明type属性 #

给button标签添加type="button"，避免Safari误判按钮默认行为：

<button type="button" class="outline-none mobile-menu-button cursor-pointer hover:bg-opacity-20">

以上修改完成后即可正常兼容iOS Safari的菜单切换交互。

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