Jquery – iPad/iPhone hover problem causes the user to double click a link

hoveripadjquerymouseover

I have some websites I built times ago, that use jquery mouse events…I just got an ipad and i noticed that all the mouse over events are translated in clicks…so for instance i have to do two clicks instead of one..(the first hover, than the actual click)

is there a workaround ready to solve this? maybe a jquery command i shoudl have used instead of mouseover/out etc..
thanks!

Best Answer

Haven't tested this fully but since iOS fires touch events, this could work, assuming you are in a jQuery setting.

$('a').on('click touchend', function(e) {
    var el = $(this);
    var link = el.attr('href');
    window.location = link;
});

The idea is that Mobile WebKit fires a touchend event at the end of a tap so we listen for that and then redirect the browser as soon as a touchend event has been fired on a link.

Related Topic