Question

I’m building a website where some elements in the navigation menu have a submenu. These submenus are shown when the mouse hovers over the element, but of course on mobile I cannot do that since there is no actual hover. A tap means a click, and that follows the link. I hoped on a simple solution but it doesn’t work on my mobile device…

Here’s a code snippet inside a loop, this is a menu item (li) that contains a submenu (ul):

$(this).find("a").on("mouseenter focusin click", function(e) {
    if(submenu.css("display") != "block") {
        e.preventDefault(); //should work on mobile
    }
    submenu.stop().css('display', 'block').animate({
        top: 1.2em,
        opacity: 1
    }, 200);
});

Now I test this in Firefox. In normal use, you cannot actually click the menu item before the submenu comes out because display becomes block as soon as the mouse hovers over it. So in web console I type in:

$("#nav > ul > li:first-child > a").click()

This gives the expected behaviour. the submenu comes out but the link isn’t followed. On mobile, the link is still followed… What gives?

Update

I just entered two alert statements. One that says the event type first thing in the handler, and one that says “preventing default” just before e.preventDefault. On my mobile browser (Dolphin browser for Android) it gives the following on a tap of the menu item:

1. Event is mouseenter
2. Preventing default
3. Event is click

Naturally, when the first event fired is “mouseenter”, the default will not be prevented for click as that is the point where the menu shows up. In other words, I would need to make sure that the first mouseenter does show the menu but a click isn’t fired… I could check the top css property for that, but I wonder if there is another way.

Answer 1

I got it working by adding another check to see if the submenu is at the proper position, rather than using the value of display.

$(this).find("a").on("mouseenter focusin click", function(e) {
    if(e.type == "click" && submenu.css("top") != "1.2em") {
        e.preventDefault();
    }
    submenu.stop().css('display', 'block').animate({
        top: 1.2em,
        opacity: 1
    }, 200);
});