jqueryipadhtmltouch

Click event not working on iPad with touch event


I am using a click event on a page link. It works good on iPad's Safari, but when I use touch events on the same page then the click event stops working; only the touch event works there on the iPad.

Click event:

link.onclick = onLinkClick;

Touch event:

$('#sdiv').bind({
    'touchstart': function (e) {
        onTouchStart(e, sdiv);
    }
});

$('#sdiv').bind({
    'touchend': function (e) {
        onTouchEnd(e);
    }
});

$('#sdiv').bind({
    'touchmove': function (e) {
        onTouchMove(e);
    }
});

$('#sdiv').bind({
    'touchcancel': function (e) {
        onTouchCancel(e);
    }
});

Solution

  • We can differentiate between iPad and desktop using navigator.platform.

    If it's iPad then the touch event works, otherwise the click event.

    var platform = navigator.platform;
    
    if(platform == 'iPad') {
        _link.ontouchend = onLinkClick;
    } else {
        _link.onclick = onLinkClick;
    }