jQuery，如果在內部單擊鏈接 <li> 則父鏈接第一次在iPhone上不起作用

Question

這確實是一種怪異的行為，我花了大量時間，但無法弄清楚。

功能是：

根結構中有一個div，單擊該div時它會充當移動按鈕，它會打開一個導航div，該導航div是上述div的父級的同級div，該div分別具有<'ul'>和<'li'> li'>包含子導航，當單擊子導航鏈接時，它將打開第三級導航，而無需離開頁面。 然后，當我單擊上面的按鈕以關閉菜單時，它第一次不起作用，然后當我再次單擊它時，它關閉了菜單。

HTML：

<div id="headerArea">
    <div id="header-navigation">mobile menu/close button</div>
</div>

<div id="navigationMenu">
    <ul>
        <li><a>Link1</a></li>
        <li><a>Link2</a></li>
        <li><a>Link3</a></li>
    </ul>
</div>

JQuery的：

$('#header-navigation').on('click',function(e){
    // This is a mobile menu when clicks, open the sub navigation and click back again it should close the menu but when clicks on sub navigation, then the first click doesn't work and it does on the second click. 
 });

$('#navigationMenu li a').on('click', function(){
    // when this clicks, the above link doesn't work the first time but it works the second time.
});

我做了另一個實驗，在頁面加載時，我在#navigationMenu內注入了另一個鏈接，但在<'ul'>之外，這是相同的行為，然后我再次在“ #navigationMenu ul”內注入了相同的鏈接，然后單擊了click事件。鏈接第一次生效。

這與在某些情況下單擊<'li'>內的鏈接有關，原因是<'ul'>外的任何鏈接均不起作用

Answer 1

我只是通過執行以下操作解決了該問題。 正如我提到的那樣，這是一個很奇怪的問題，僅在iPhone-Safari上才發生

JQuery的：

$('#header-navigation').on('touchstart click',function(e){
    e.preventDefault(); //The reason I added that, with "touchstart", it was firing ghost clicks
});