jQuery，如果在内部单击链接 <li> 则父链接第一次在iPhone上不起作用

Question

This is really a weird behavior and I have spent a huge amount of time but couldn't figure this out.

The functionality is:

There is a div in the root structure which acts as a mobile button when clicked, it opens a navigation div which is a sibling div of the parent of above div this div has <'ul'> and <'li'> each <'li'> contains sub navigation, when clicks on the sub-navigation links, it opens the third level of navigation without leaving a page. then when I click on the above button to close the menu, it doesn't work the first time, then when I click it again the second time then it closes the menu.

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.
});

I did another experiment, on the page load, I injected another link inside #navigationMenu but outside the <'ul'> and it was the same behavior then I again injected the same link inside "#navigationMenu ul" then the click event of the link works first time.

This is something to do with then clicks inside the <'li'> for some reason any link outside the <'ul'> doesn't work

Answer 1

I just fixed that issue by doing the following. As I mentioned this is a weird issue and was only happening on iPhone - Safari

JQuery:

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