Monday, 18 July 2016

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>

No comments:

Post a Comment