addEventListener 单击在 iOS 上的 safari 中不起作用，但在其他地方起作用

Question

我的菜单导航栏响应速度很慢。我的移动菜单应该根据对“汉堡包”图标的点击来包装或展开。这适用于 chrome 开发者工具，也适用于 chrome on phone。但是不适用于 iOS safari，这对我来说很重要。我粘贴下面的代码，如果你想查看实时服务器，你可以在这里找到它（抱歉，它不是英文的，但这应该不是什么大问题）：http://hustydoucko.freecluster.eu/

这是我的相关 html

<!-- Mobile menu button -->
          <div class="md:hidden flex items-center">
            <button class="outline-none mobile-menu-button cursor-pointer hover:bg-opacity-20">
              <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"
              >
              <path d="M4 6h16M4 12h16M4 18h16"></path>
              </svg>
            </button>
          </div>
      </nav>
    <!-- Mobile menu -->
    <div class="hidden mobile-menu">
      <ul class="" style="margin-left: -20px; margin-right: -20px">
        <li><a href="#omne" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">O mně</a></li>
        <li><a href="#cenik" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Ceník</a></li>
        <li><a href="#faq" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">FAQ</a></li>
        <li><a href="#contact" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Kontakt</a></li>
       </ul>
    </div>

还有我的Javascript

/* MOBILE MENU NAVBAR */

// Grab HTML Elements
const btn = document.querySelector(".mobile-menu-button");
const menu = document.querySelector(".mobile-menu");

// Add Event Listeners
btn.addEventListener("click", () => {
    menu.classList.toggle("hidden");
});

/* END OF MOBILE MENU NAVBAR */

我已经尝试将“click”和“touchstart”作为事件监听器的选项。 Safari 对它们都抵制

请让我知道我是否应该 post 以不同的方式编写代码，以便于 reader。这是我的第一个 Whosebug post 代码。提前致谢！

Answer 1

仅在 DOM 加载后“抓取”DOM 个元素！

查看Documentation页

// find HTML elements only after DOM loaded!!!! if DOM did't load you can't find it
window.addEventListener('DOMContentLoaded', (event) => {
  // Grab HTML Elements
  const btn = document.querySelector(".mobile-menu-button");
  const menu = document.querySelector(".mobile-menu");

  // Add Event Listeners
  btn.addEventListener("click", () => {
    menu.classList.toggle("hidden");
  });
});

.hidden {
  display: none;
}

<!-- Mobile menu button -->
<div class="md:hidden flex items-center">
  <button class="outline-none mobile-menu-button cursor-pointer hover:bg-opacity-20">
              <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"
              >
              <path d="M4 6h16M4 12h16M4 18h16"></path>
              </svg>
            </button>
</div>
</nav>
<!-- Mobile menu -->
<div class="hidden mobile-menu">
  <ul class="" style="margin-left: -20px; margin-right: -20px">
    <li><a href="#omne" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">O mně</a></li>
    <li><a href="#cenik" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Ceník</a></li>
    <li><a href="#faq" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">FAQ</a></li>
    <li><a href="#contact" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Kontakt</a></li>
  </ul>
</div>

addEventListener 单击在 iOS 上的 safari 中不起作用，但在其他地方起作用

addEventListener click not working in safari on iOS but works elsewhere

html

javascript

css

mobile-safari

addeventlistener