Question

I have my HTML code as;

<a href="someTarget.html" class="menuLink">Link</a>

Now the JS code previously was;

$(".menuLink").mouseover(function(){
    //code for show() submenu
}


$(".menuLink").mouseout(function(){
    //code for hide() submenu
}

I am testing this on iPad and the above code worked fine on the iPad (i.e. on first tap, it fires the hover event and shows the submenu and only on the next tap does it fire the click event or go to the target link)

For some reason (adding delay to the main menu), I had to update the code as follows;

$this.hover(
    function(){ // over
        $this.data("timer", setTimeout(show, 500));
    },
    function(){ // out
        $this.data("timer", setTimeout(hide, 500));
    }
)

So the Issue is as follows;
On the first tap of the link, it immediately takes the user to the target URL (instead of 2 taps earlier for hover/click)

Please help me fix this issue.

Answer 1

jQuery documentation says that $(selector).hover(handlerIn, handlerOut) is just a shortcut for using $(selector).mouseenter(handlerIn).mouseleave(handlerOut).

That means there is no mouseover()/mouseout() event binded to the object and maybe the mobile browser doesn’t handle it correctly for the other 2 events (that is mouseenter()/mouseleave()).

Try replacing your code to this:

$this.mouseover(function(){ // over
        $this.data("timer", setTimeout(show, 500));
    }).mouseout(function(){ // out
        $this.data("timer", setTimeout(hide, 500));
    }
)

Let me know if that does the trick.