點擊事件<span>或</span><div>標簽不工作 safari 問題</div><div id="text_translate"><p>我的 iPhone(7 Plus) 上出現了Click事件問題。 點擊方法不適用於 IOS 設備。 但在 IOS Chrome 上工作正常。</p><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"> $('.menuOpen').on('click', function() { console.log('Show Menu'); $('.menuBar').toggleClass('d-none'); });</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"&gt; &lt;span class="menuOpen"&gt;Menu&lt;/span&gt; &lt;ul class="d-none menuBar"&gt; &lt;li&gt;Action 1&lt;/li&gt; &lt;li&gt;Action 2&lt;/li&gt; &lt;li&gt;Action 3&lt;/li&gt; &lt;li&gt;Action 4&lt;/li&gt; &lt;/ul&gt;</pre></div></div><p></p><p> 我已經嘗試過這些對我不起作用：</p><p> <a href="https://stackoverflow.com/questions/35646154/on-click-function-is-not-working-on-safari-browser" rel="nofollow noreferrer">單擊 function 在 safari 瀏覽器上不起作用</a></p><p> <a href="https://stackoverflow.com/questions/6682302/onclick-not-working-in-safari" rel="nofollow noreferrer">onclick() 在 safari 中不起作用</a></p><p> <a href="https://stackoverflow.com/questions/21555241/jquery-click-not-working-on-ipad-iphone" rel="nofollow noreferrer">jquery 點擊在 ipad/iphone 上不起作用</a></p><p>謝謝您的幫助！！</p></div>

Question

我的 iPhone(7 Plus) 上出現了Click事件問題。 點擊方法不適用於 IOS 設備。 但在 IOS Chrome 上工作正常。

這是代碼：

 $('.menuOpen').on('click', function() { console.log('Show Menu'); $('.menuBar').toggleClass('d-none'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <span class="menuOpen">Menu</span> <ul class="d-none menuBar"> <li>Action 1</li> <li>Action 2</li> <li>Action 3</li> <li>Action 4</li> </ul>

我已經嘗試過這些對我不起作用：

單擊 function 在 safari 瀏覽器上不起作用

onclick() 在 safari 中不起作用

jquery 點擊在 ipad/iphone 上不起作用

謝謝您的幫助！！

Answer 1

我遇到了這個解決方案 add role="button" on <span>並click事件開始為 IOS 設備工作：

<span class="menuOpen" role="button">Menu</span>

如果我們用<button>替換<span>也可以修復它

 $('.menuOpen').on('click', function() { console.log('Show Menu'); $('.menuBar').toggleClass('d-none'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <span class="menuOpen" role="button">Menu</span> <ul class="d-none menuBar"> <li>Action 1</li> <li>Action 2</li> <li>Action 3</li> <li>Action 4</li> </ul>

參考：

Safari HTML 參考

ARIA：按鈕角色