擺脫雙擊效應

這是我的fiddle。正如你可以看到我已經定義了一個簡單的點擊事件處理程序：擺脫雙擊效應

$('#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位置意外更改。

我該如何避免這種行爲？

來源

2013-07-22 lexeme

儘量http://jsfiddle.net/arunpjohny/Fy59f/1/ –

你的意思的問題是，如果你雙擊它，即使你到達列表的最後/開始，它仍然會滑動？ –

@ArunPJohny這不會改變 – lexeme

只是檢查是否$ul是動畫：

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

DEMO

來源

2013-07-22 08:48:12

檢查動畫之前執行的事件處理程序的身體存在的。

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/

來源

2013-07-22 08:52:23

你需要鎖定您的旅行者採取任何行動，直到動畫結束。這裏我使用了鎖定變量，但是可以使用任何方法來鎖定它。對於有生命爲此使用的回調：

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

Here is the jsfiddle like

來源

2013-07-22 08:52:46 duskpoet

你可能只是阻止它以$ ul.stop（）;您定義誰$ UL是

這裏之前是小提琴

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

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

來源

2013-07-22 09:00:19

擺脫雙擊效應

回答

相關問題