jQuery single page site drop menu links fail on iOS iPad/iPhone

Question

I have a one-page scrolling site running jquery (not jquery mobile) I have an anchor link that triggers the display of a drop menu (unordered list). Clicking a list item within the drop menu animates the associated slide into view, and hides the drop menu.

Works great on everything except iOS browsers. My problem is the link only works the first time it is clicked.

I have read extensively about distinguishing mouse clicks and hover events on iOS. None of the solutions work for me.

I have tried everything:

• Making the #btn_menu element an anchor and div
• Adding the cursor:pointer style on the links, the li tags, wrapped div tags
• Wrapping anchor tags on all list menu items
• Triggering touch events, plus trying to fire touchend, menu click events etc after the first click
• Touch libraries such as Hammer.js

Simple code eg.

$("#btn_menu").on("click touchstart", function(e) {
    e.preventDefault();
    if ($(".nav_menu").css('display') == 'block') {
        $(".nav_menu").css('display','none');
    } else {
        $(".nav_menu").css('display','block');
    }
});

$(".nav_menu ul li").on("click touchstart", function(e) { 
    e.preventDefault();
    $(".nav_menu").css('display','none');
    gotoSlide($(this).attr('data-slide'));

    //Tried all this:   
    //$('body').trigger("click touchstart");
    //$('#btn_menu').trigger("touchstart touchend touchmove");
    //$('#btn_menu').data('clicked', null);
    //$('#btn_menu').trigger("mouseout");
});

The HTML menu:

<a id="btn_menu" href="#" data-role="button">
<span class="menutxt">MENU</span>
</a>
<div class="nav_menu" style="display:none;">
<ul>
    <li data-slide="1">Home</li>
    <li data-slide="2">slide 1</li>
    <li data-slide="3">slide 2</li>
    <li data-slide="4">slide 3</li>
</ul>
</div>

** What I know is happening **

Only the first #btn_menu and subsequent .nav_menu li click works perfectly. But if I then touch/move the screen slighty, the proceeding #btn_menu click works. An event listener on the #btn_menu seems to get cleared?

The hover event seems to keep working after the first click, and is interfering with all the proceeding clicks. I know this since the word "MENU" gets underlined when I click on it - I can't seem to clear the event listening for a hover on #btn_menu

At my wits end. Does anyone have suggestions on how I can get the click events working on iOS on a single page site for this sort of drop menu?

I tested solutions like slicknav.js within my code but these also exhibit the same problem.

Answer 1

Nothing out of the ordinary in your code, except 'touchstart'. Looked it up on Mozilla Developer Network (always a good place to start) and it says (under 'handling clicks'):

Since calling preventDefault() on a touchstart or the first touchmove event of a series prevents the corresponding mouse events from firing, it's common to call preventDefault() on touchmove rather than touchstart. That way, mouse events can still fire and things like links will continue to work.

What happens if you remove the 'e.preventDefault()' in your second function?