JavaScript Click与touchstart事件监听在iOS移动设备不生效求解

问题根源 #

1. 事件绑定逻辑冲突：你为同一个点击/触摸事件同时绑定了打开和关闭两个函数，虽然当前有类判断暂未触发异常，但属于逻辑漏洞。
2. 移动端触摸事件冲突：touchstart触发后会默认触发后续click事件，存在300ms延迟，同时iOS Safari对非原生可点击元素（如<div>）的事件识别存在特殊限制。
3. animationend事件重复注册：每次打开/关闭菜单都会新增一个animationend监听，多次操作后会导致逻辑重复执行、状态错乱。
4. CSS交互属性缺失：iOS下无明确交互属性的元素事件容易被拦截。

具体修改方案 #

1. JavaScript代码替换 #

合并打开/关闭逻辑为单个切换函数，修正事件绑定逻辑，解决事件冲突和重复监听问题：

const bodyTag = document.querySelector("body");

if (bodyTag.classList.contains("index")) {
  //Variables
  const burgerDiv = document.querySelector(".burger");
  const menu = document.querySelector(".menu");
  const buttonMobile = document.querySelector(".button-mobile");
  const barMid = document.querySelector(".bar-mid");

  // 合并为单个切换函数
  function toggleMenu(e) {
    // 阻止触摸事件默认行为，避免和click冲突
    if (e.type === 'touchstart') {
      e.preventDefault();
    }
    if (burgerDiv.classList.contains("you-can-open")) {
      // 打开菜单逻辑
      burgerDiv.classList.remove("close-burger");
      barMid.classList.remove("close-mid");
      burgerDiv.classList.add("opened-burger");
      barMid.classList.add("opened-mid");
      menu.style.marginLeft = "0";
      buttonMobile.style.opacity = "0";
      burgerDiv.classList.remove("you-can-open");
      // 监听添加once参数，执行一次自动移除
      barMid.addEventListener("animationend", function () {
        burgerDiv.classList.add("you-can-close");
        burgerDiv.classList.remove("close-burger");
      }, { once: true });
    } else if (burgerDiv.classList.contains("you-can-close")) {
      // 关闭菜单逻辑
      burgerDiv.classList.add("close-burger");
      barMid.classList.add("close-mid");
      burgerDiv.classList.remove("opened-burger");
      barMid.classList.remove("opened-mid");
      burgerDiv.classList.remove("you-can-close");
      menu.style.marginLeft = "-500px";
      buttonMobile.style.opacity = "1";
      // 监听添加once参数，执行一次自动移除
      barMid.addEventListener("animationend", function () {
        burgerDiv.classList.add("you-can-open");
        burgerDiv.classList.remove("you-can-close");
      }, { once: true });
    }
  }

  // 统一绑定事件，添加passive: false允许preventDefault生效
  burgerDiv.addEventListener("click", toggleMenu);
  burgerDiv.addEventListener("touchstart", toggleMenu, { passive: false });
}

2. CSS属性补充 #

给.burger类新增适配iOS的交互属性：

.burger {
  width: 20%;
  height: 10%;
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
  cursor: pointer;
  /* 新增以下两个属性适配iOS */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; /* 去掉点击默认高亮 */
}

3. HTML标签修改 #

给汉堡菜单容器添加空onclick属性，强制iOS将其识别为可点击元素：

<div class="burger mobile ghost you-can-open" onclick="">
  <div class="bar-top line"></div>
  <div class="bar-mid line"></div>
  <div class="bar-bot line"></div>
</div>

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