CODE CODIFY.CLUB

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

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)

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.

OR you can trigger on click of parent div

$(document).on('click', '.clickable-div', function() {

document
.location = $(this).data('href');

});
 

Using css style : I’ve found this the easy fix, simply add this to the css

<style>
.clickable-div
{
cursor: pointer;
}
</style>

V!ral

Developer, Technology aficionado, Beer Lover and founder of codify.club Network. Who shares a keen interest about website development, health issues, cancer awareness and other fun stuff.

Add comment

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.

Most popular

Most discussed