如何讓一個類不可點擊直到它執行一個函數然後再次點擊它？

Question

我對已發佈的以下問題進行了查詢：「在.clickable類被刪除後，jQuery click（）仍然被觸發」現在，在類似的情況下，如果某個類的點擊調用了某個函數，使用動畫，我們希望僅在該功能執行的時候禁用點擊，然後再次點擊。我們怎麼做到這一點？

Answer 1

您可以在鏈接class =「clickable」中添加一個類。而在點擊功能，這樣做：

$('#clickme').bind('click', function(e) { 
    ... 
    if(!$(this).hasClass('clickable')) { return; } 
    ... 
    // the rest of line will get executable only if link has clickable class 
}); 

在其他功能，在需要時啓用或禁用可點擊：

$('#clickme').addClass('clickable'); // to make it clickable 

or 

$('#clickme').removeClass('clickable'); // to make it 'non-clickable' 

Answer 2

如果你不關心IE瀏覽器，快速（和骯髒？ ）的解決方案是添加一個類，pointer-events設置no none到您要禁用的元素全部附加的事件，然後隨時刪除類。

它有一些缺點（例如，一些邏輯放在CSS內），但我覺得它非常方便。

小提琴（不會在IE瀏覽器，僅適用於Chrome測試）：fiddle （我這麼被迫在這裏添加代碼，因爲我有一個小提琴鏈接）

JS

function onClick(evt) { 
    alert("clicked !"); 
    evt.target.classList.add("no-event"); 
    setTimeout(function() { 
     evt.target.classList.remove("no-event"); 
     alert("you can click again !"); 
    }, 5000); 
} 

CSS

.no-event { 
    pointer-events : none; 
} 

Answer 3

小號ay滑塊與動畫一起工作，我們希望僅在功能執行時禁用點擊，然後再次點擊。

有幾種方法，但如果你想使用滑塊的情況，那麼你可以使用這種方式：

$('#next, #prev').on('click', function(){ 
    if($(this).hasClass('clicked')){ return;} 
    $(this).addClass('clicked');// add the class to stop any execution after if check above. 
}); 

然後，你必須在動畫結束，從按鈕，刪除clicked類：

$('.slider').on('animationend', function(){ 
    $('.clicked').removeClass('clicked'); // remove the class to enable it. 
});