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”内注入了相同的链接，然后单击链接的事件第一次生效。

这与在某些情况下单击<'li'>内的任何链接有关

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