为什么在滚动屏幕时在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上，页面大于手机显示区域，所以我触摸屏幕并滚动页面。 如果我的手指在滚动时碰巧在空闲时隙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...
        }
    }
});

Answer 2

Jquery Mobile 使用 Vclicks，这是比常规点击更好的方式。他们也有触地和润色。