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

jquery ipad hover mouseover
Francesco picture Francesco · Jun 14, 2010 · Viewed 142.2k times · Source

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

cduruk picture cduruk · Aug 6, 2010

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 questions

Jquery hover function and click through on tablet

I have a jquery slideshow that that uses a navigation list to switch out the slideshow images. How it works is when you hover over the nav list it highlights ('.active') and the associated image switches to that. There …

Read More
How can I recognize touch events using jQuery in Safari for iPad? Is it possible?

Is it possible to recognize touch events on the iPad's Safari browser using jQuery? I used mouseOver and mouseOut events in a web application. Are there any similar events for the iPad's Safari browser since there are no events like …

Read More
jQuery get the location of an element relative to window

Given an HTML DOM ID, how to get an element's position relative to the window in JavaScript/JQuery? This is not the same as relative to the document nor offset parent since the element may be inside an iframe or …

Read More