Why is my click event being called on iPad/iPhone when scrolling the screen?

Question

Given the following jQuery code:

// iPad/Safari doesn't recognize the "click" event using "live", so we have to do some trickery here
var ua = navigator.userAgent, 
    event = ((ua.match(/iPad/i)) || (ua.match(/iPhone/i))) ? "touchstart" : "click";

$(".freeTimeSlot").live(event, function() {
 ...
}

On my iPhone, the page is larger than my phone display area, so I touch the screen and scroll the page. If my finger happens to be in one of the freeTimeSlot div's when I scroll, it activates the click event.

How can I keep this from happening?

Answer 1

If you are using jQuery UI you can give a try to jQuery UI Touch Punch.

It's not worth adding jQuery UI to your page if you don't need to, so maybe try someting like this snippet :

$(".freeTimeSlot").on("touchmove",function(e)
{
    e.preventDefault();
    var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
    var elem = $(this).offset();
    var x = touch.pageX - elem.left;
    var y = touch.pageY - elem.top;
    if(x < $(this).width() && x > 0)
    {
        if(y < $(this).height() && y > 0)
        {
            // your code...
        }
    }
});