防止多次觸發jQuery中的點擊事件

我已經創建了jQuery content switcher。一般來說，它工作正常，但它有一個問題。如果多次單擊側面的鏈接，有時會看到多個內容。防止多次觸發jQuery中的點擊事件

這個問題很可能存在於點擊事件中的某處。下面是代碼：

$('#tab-list li a').click(
    function() { 
     var targetTab = $(this).attr('href'); 
     if ($(targetTab).is(':hidden')) { 
      $('#tab-list li').removeClass('selected'); 
      var targetTabLink = $(this).parents('li').eq(0); 
      $(targetTabLink).addClass('selected'); 
      $('.tab:visible').fadeOut('slow', 
       function() { 
        $(targetTab).fadeIn('slow'); 
       } 
      ); 
     } 
     return false; 
    } 
);

我試圖加把鎖的過渡，以便爲轉變正在發生進一步的點擊將被忽略，但無濟於事。我也試圖阻止，如果事情已經在動畫，使用以下觸發過渡：

if ($(':animated')) { 
    // Don't do anything 
} 
else { 
    // Do transition 
}

但它似乎總是認爲事情正在動畫。任何想法，我可以防止多次觸發動畫？

來源

2009-06-18 White Elephant

一個想法是在您的函數開始時刪除click事件，然後在動畫完成時將點擊事件添加回來，所以在持續時間期間點擊不起作用。

如果你有能力在動畫完成時執行代碼，這應該工作。

來源

2009-06-18 12:58:00

天才。今天用這個答案保存了我的屁股，找不到爲什麼多個點擊事件正在註冊，我認爲jQuery會很聰明並且停止它的發生，jQuery不能爲你做所有事情，因爲事實證明。謝謝。 – 2011-11-03 01:14:50

一個方法是這樣的：

$('#tab-list ul li').one('click', loadPage); 
var loadPage = function(event) { 
    var $this = $(this); 
    $global_just_clicked = $this; 
    var urlToLoad = $this.attr('href'); 
    $('#content-area').load(urlToLoad, pageLoaded); 
} 
$global_just_clicked = null; 
var pageLoaded() { 
    $global_just_clicked.one('click', loadPage); 
}

正如你所看到的，這種方法是充滿了缺點：在當前頁面加載之前單擊另一個選項卡會發生什麼？如果請求被拒絕，該怎麼辦？如果它滿月呢？

答案是：這種方法只是一個基本的演示。一個適當的實施將：

不包含全局變量$global_just_clicked
不依賴於。將使用.ajax()，並處理請求取消，點擊其他標籤等

注意：在大多數情況下，你不需要採取這種循環的方法。我相信你可以通過多次點擊到同一個標籤的方式來補救你的代碼不會影響最終結果。

jrh。

來源

2009-06-18 13:03:31 jrharshath

添加一個變量用作鎖而不是（：animating）。

點擊，檢查鎖是否設置。如果沒有，請設置鎖定，啓動進程，然後在淡入淡出完成時釋放鎖定。

var blockAnimation = false; 

$('#tab-list li a').click(
    function() { 
     if(blockAnimation != true){ 
     blockAnimation = true; 
     var targetTab = $(this).attr('href'); 
     if ($(targetTab).is(':hidden')) { 
      $('#tab-list li').removeClass('selected'); 
      var targetTabLink = $(this).parents('li').eq(0); 
      $(targetTabLink).addClass('selected'); 
      $('.tab:visible').fadeOut('slow', 
       function() { 
        $(targetTab).fadeIn('slow', function(){ blockAnimation=false; }); 
       } 
      ); 
     } 
     } 
     return false; 
    } 
);

來源

2009-06-18 13:04:50 Ben

我試過這種方法，但似乎無法得到它的工作。它每次都通過了鎖定測試。 – 2009-06-18 13:44:27

我的代碼前面玩弄周圍，並作以下修改這似乎工作上來：

$('#tab-list li a').click(
    function() { 
     $('.tab:animated').stop(true, true); 
     var targetTab = $(this).attr('href'); 
     if ($(targetTab).is(':hidden')) { 
      $('#tab-list li').removeClass('selected'); 
      var targetTabLink = $(this).parents('li').eq(0); 
      $(targetTabLink).addClass('selected'); 
      $('.tab:visible').fadeOut('slow', 
       function() { 
        $(targetTab).fadeIn('slow'); 
       } 
      ); 
     } 
     return false; 
    } 
);

所發生的一切時，點擊一個新的標籤時，它會立即帶來的電流動畫到最後，然後開始新的過渡。

來源

2009-06-18 13:50:38

嗯，這是我做到了這一點，它工作得很好。

$(document).ready(function() { 
    $(".clickitey").click(function() { 
     if($("#mdpane:animated").length == 0) { 
      $("#mdpane").slideToggle("slow"); 
      $(".jcrtarrow").toggleClass("arrow-open"); 
     } 
    }); 
});

這不是在做你的代碼做什麼ofcourse這是從我的網站代碼，但我只是想點我怎麼忽略了動畫過程中發生的點擊。請讓我知道這是否無效。謝謝。要做到這一點

來源

2010-08-05 07:48:55

一種方法使用事件的timeStamp財產像這樣的差距多次點擊之間的某個時間：

var a = $("a"), 
    stopClick = 0; 


a.on("click", function(e) { 
    if(e.timeStamp - stopClick > 300) { // give 300ms gap between clicks 
    // logic here 

    stopClick = e.timeStamp; // new timestamp given 
    } 


});

來源

2014-11-14 07:15:33

防止多次觸發jQuery中的點擊事件

回答

相關問題