title: addEventListener click not working in safari on iOS but works elsewhere
body: <p>I'm struggling with my menu navbar responsivity. My mobile-menu is supposed to wrap or unwrap based on the click on &quot;hamburger&quot; icon. This works in chrome developer tools and in chrome on phone as well. However doesn't work on iOS safari which is a big deal for me. I paste the code below and in case you wanna check on live server you can find it here(sorry it's not in English but that shouldn't be too much of a problem): <a href="http://hustydoucko.freecluster.eu/" rel="nofollow noreferrer">http://hustydoucko.freecluster.eu/</a></p>
  <p>Here is my relevant html</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Mobile menu button --&gt;
            &lt;div class="md:hidden flex items-center"&gt;
              &lt;button class="outline-none mobile-menu-button cursor-pointer hover:bg-opacity-20"&gt;
                &lt;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"
                &gt;
                &lt;path d="M4 6h16M4 12h16M4 18h16"&gt;&lt;/path&gt;
                &lt;/svg&gt;
              &lt;/button&gt;
            &lt;/div&gt;
        &lt;/nav&gt;
      &lt;!-- Mobile menu --&gt;
      &lt;div class="hidden mobile-menu"&gt;
        &lt;ul class="" style="margin-left: -20px; margin-right: -20px"&gt;
          &lt;li&gt;&lt;a href="#omne" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300"&gt;O mně&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#cenik" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300"&gt;Ceník&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#faq" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>And my Javascript</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* 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", () =&gt; {
      menu.classList.toggle("hidden");
  });
  
  /* END OF MOBILE MENU NAVBAR */</code></pre>
  </div>
  </div>
  </p>
  <p>I have tried both “click” and “touchstart” as an option for eventlistener. Safari resists both of them</p>
  <p>Please let me know if I should post the code in different way so that it is convenient for the reader. It's my first stackoverflow post with code. Thank you in advance!</p>