消除双击效果

Getting rid of the double click effect

本文关键字：双击      更新时间：2023-09-26

这是我的小提琴。正如您所看到的，我定义了一个简单的点击事件处理程序：

$('#traveller > a').click(function(e) {
    e.preventDefault();
    var $ul = $('#traveller ul');
    if($(this).hasClass('handle-next')) {
        if(Math.abs($ul.position().top - parentPadding) < totalHeight - itemHeight) {
            $ul.animate({top: '-=' + itemHeight});
        }
    }
    else {
        if($ul.position().top - parentPadding < 0) {
             $ul.animate({top: '+=' + itemHeight});
        }
    }
});

我注意到，当我快速双击时，按下a.handle-next/a.handle-prev，ul的位置会发生意外变化。

我为什么要避免这种行为？

只需检查$ul是否已设置动画：

if($ul.is(':animated')) return;

演示

在执行事件处理程序主体之前，检查是否正在发生动画。

if(!$ul.is(":animated")){
    if($(this).hasClass('handle-next')) {
        if(Math.abs($ul.position().top - parentPadding) < totalHeight - itemHeight) {
            $ul.animate({top: '-=' + itemHeight});
        }
    }
    else {
        if($ul.position().top - parentPadding < 0) {
            $ul.animate({top: '+=' + itemHeight});
        }
    }
}

工作示例http://jsfiddle.net/A5u43/19/

您需要锁定与旅行者的任何动作，直到动画完成。这里我使用了锁定变量，但你可以使用任何方法来锁定它

      $ul.animate({top: '-=' + itemHeight}, 400, 'swing', function(){
            lock = false;
        });

这是类似jsfiddle的

您可以用$ul.stop（）来阻止它；就在你定义谁$ul是之前

这是小提琴

var $ul = $('#traveller ul');
$ul.stop(true,true);

http://jsfiddle.net/A5u43/23/

相关文章：