jquery, если ссылка нажата внутри <li>, тогда родительская ссылка не работает в первый раз на iPhone

Question

Это действительно странное поведение, и я потратил огромное количество времени, но не смог понять это.

Функциональность:

В корневой структуре есть 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'> по какой-то причине любая ссылка за пределами <'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
});