Question

我有一个奇怪的问题，我在jQuery中编写旋转木马类动画。我有它，所以当你点击一个链接，它动画div。为了防止在动画期间能够点击链接，我设置了一个绑定条件，其中链接绑定到动画，但在动画期间它是未绑定的，然后在结束时重新绑定。最好的小提琴演示：http://jsfiddle.net/aRrmD/1/。

这一切在Fiddlr中表现得非常出色。但是，当我把它放到一个实际的网页中时，如果你快速点击两次链接就不会这么好 - 你得到的是第一次点击触发动画，但第二次点击重新加载页面因为链接没有绑定到动画期间的动画功能，因此链接的默认行为启动并成为标准链接，直到动画完成并且函数绑定回它。因此，如果您双击该链接，它会在第二次单击时重新加载页面。我不知道为什么它不会在Fiddlr中这样做，它必须与事件如何与该系统一起工作，这使得它与独立页面不同。

所以我希望能够做到这一点，以便在链接未绑定时（即在动画期间）防止默认链接默认行为。我知道我可以通过使锚不是锚来解决这个问题，但这是一个更广泛的系统的一部分，不幸的是让我无法控制它。

感谢任何人们......

Answer 1

您可以测试动画是否正在进行而不是解除绑定并绑定事件处理程序：

function moveNext(e) {
    e.preventDefault();
    var $carousel = $('.carousel');
    if(!$carousel.is(':animated')) {
        $carousel.animate({
            marginLeft: '-=' + widthOfItem
        }, 500)
    }
}

参考： :animated

如果你真的想要取消绑定并绑定事件处理程序，请添加另一个事件处理程序，它总是阻止默认操作：

$('.btn-next').bind('click', false); // will always prevent the default action
$('.btn-next').bind('click', moveNext);

将false传递给.bind与传递function() { return false;)相同。这可以防止事件的默认操作和冒泡，因此它可能正是您想要的。但你可以简单地通过function(e) { e.preventDefault(); }。

然后，您只需取消绑定moveNext，而不是取消绑定所有事件处理程序：

$('.btn-next').unbind(moveNext);

您应该缓存对$('.btn-next')的引用，或使用$(this)。

从jquery中的函数解绑时，在链接上返回false

1 个答案: