jquery - 为什么在 iPad/iPhone 上滚动屏幕时会调用我的点击事件？

Question

给出以下 jQuery 代码:

// 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() {
 ...
}

在我的 iPhone 上，页面比我的手机显示区域大，因此我触摸屏幕并滚动页面。如果当我滚动时我的手指恰好位于 freeTimeSlot div 之一中，则会激活单击事件。

如何避免这种情况发生？

Answer 1

如果您使用 jQuery UI，您可以尝试 jQuery UI Touch Punch .

如果不需要的话，不值得将 jQuery UI 添加到您的页面，所以也许可以尝试像这样的代码片段:

$(".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...
        }
    }
});