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

Question

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!

Answer 1

You could check navigator.userAgent like this:

if(!navigator.userAgent.match(/iPhone/i) || !navigator.userAgent.match(/iPad/i)) {
    //bind your mouseovers...
}

but you would have to check for blackberries, droids, umpty other touchscreen devices. You could also bind the mouseovers only if the userAgent contains Mozilla, IE, Webkit, or Opera, but you still need to screen for some devices because the Droid, for instance, reports its userAgent string as:

Mozilla/5.0 (Linux; U; Android 2.0.1; en-us; Droid Build/ESD56) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

The iPhone's string is similar. If you just screen for iPhone, iPod, iPad, Android and Blackberry you might get the majority of handhelds, but not all of them.

Answer 2

I think it'd be wise to try mouseenter in place of mouseover. It's what's used internally when binding to .hover(fn,fn) and is generally what you want.

Answer 3

i "think" that your links have no onmouseover event, where 1 tap activates onmouseover and the double tap activates the link. but idk. i don't have an iPad. i think ya gotta use gesture/touch events.

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariJSRef/SafariJSRef.pdf

Answer 4

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

$('a').live('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.

Answer 5

I have the same problem. I have tooltips using the qTip library on my web page. On a non-touch device, it is triggered using hover. On an iPad it is triggered when tapping it.

I fully understand that it is nice to optimize a UI for iPad but I would expect the Safari on iPad to simply ignore the hover, since there is no hover. Instead it sees a hover as a click. That seems very wrong to me and I think a lot of existing web apps will face this problem.

Answer 6

I had the same problem but not on a touch device. The event triggers every time you click. There is something about event queuing or so.

However, my solution was like this: On click event (or touch?) you set a timer. If the link is clicked again within X ms, you just return false.

To set per element timer, you can use $.data().

This also may fix the @Ferdy problem described above.