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

Question

这确实是一种奇怪的行为，我花了很多时间但无法弄清楚这一点。

功能是:

根结构中有一个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'> 外部注入(inject)了另一个链接，这是相同的行为，然后我再次在“#navigationMenu ul”内部注入(inject)相同的链接，然后单击链接首次有效的事件。

这与在 <'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
});