如何防止繼續點擊元素？

Question

我想阻止繼續點擊按鈕.toggler。當我點擊它div正確切換，但如果我點擊它繼續多次div切換多次，直到我的點擊事件尚未完成。

的期望是，如果我按一下按鈕，它的Click事件，直到DIV沒有正確切換應關閉。之後，它應該是點擊。

點擊按鈕繼續多次看到這個問題。

$(document).ready(function() { 
 
    $('.toggler').on('click', function(event) { 
 
     event.preventDefault(); 
 
     $('.main-div').slideToggle('slow'); 
 
    }); 
 
});

* {margin: 0px; box-sizing: border-box;} 
 
.main-div {width: 80%; float: right; height: 200px; background: #ddd;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="toggler">Toggle</button> 
 
<div class="main-div"></div>

jQuery的代碼中，我曾嘗試是：

$(document).ready(function() { 
    $('.toggler').on('click', function(event) { 
     event.preventDefault(); 
     var thisEement = $(this); 
     thisEement.off('click'); 
     $('.main-div').slideToggle('slow', function(){ 
      thisEement.on('click'); 
     }); 
    }); 
}); 

但上面的代碼是不工作...！

任何幫助，將不勝感激。

Answer 1

的slideToggle具有在操作完成時被調用的回調函數。所以，你可以引入將完成切換時的操作開始時設置爲false，並改回true一個新的布爾變量。

$(document).ready(function() { 
 
    var flag = false; 
 
    $('.toggler').on('click', function(event) { 
 
     event.preventDefault(); 
 
     if(!flag){ 
 
      flag = true; 
 
      $('.main-div').slideToggle("slow", function() { 
 
      flag = false; 
 
      }); 
 
     } 
 
     
 
    }); 
 
});

* {margin: 0px; box-sizing: border-box;} 
 
.main-div {width: 80%; float: right; height: 200px; background: #ddd;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="toggler">Toggle</button> 
 
<div class="main-div"></div>

Answer 2

只需使用一個布爾值，當切換幻燈片啓動和停止。

var inMotion = false; 

$('.toggler').on('click', function(event) { 
    event.preventDefault(); 
    if (inMotion == false) { 
    inMotion = true; 
    $('.main-div').slideToggle('slow', function() { 
     inMotion = false; 
    }); 
    } 
}); 

當slideToggle()函數完成時，該回調將運行。該回調會將布爾值設置爲false，使其再次觸發。

Answer 3

試試這個，

$(document).ready(function() { 
    $('.toggler').on('click', function(event) { 
    event.preventDefault 
    $(".toggler").prop('disabled', true); // disable first 
    $('.main-div').slideToggle("slow", function() { // when slidetoggle ends 
     $(".toggler").prop('disabled', false); // enable button again. 
    }); 
    }); 
}); 

jsfiddle demo

希望幫助，

Answer 4

你可以試試這個方法...

$(document).ready(function() { 
 
    $('.toggler').on('click', function(event) { 
 
    $("#togglerButton").attr("disabled", "true"); 
 
    $('.main-div').slideToggle('slow', function() { 
 
     $("#togglerButton").removeAttr("disabled"); 
 
    }); 
 
    }); 
 
});

* { 
 
    margin: 0px; 
 
    box-sizing: border-box; 
 
} 
 

 
.main-div { 
 
    width: 80%; 
 
    float: right; 
 
    height: 200px; 
 
    background: #ddd; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="toggler" id="togglerButton">Toggle</button> 
 
<div class="main-div"></div>

您還可以使用事件對象傳遞給click事件做到這一點。您可以計算點擊事件執行的次數。基於此，您可以在JavaScript代碼中設置條件並防止多次點擊，如下面給出的代碼。

$(document).ready(function() { 
    $('.toggler').on('click', function(event) { 
    if (!event.originalEvent.detail || event.originalEvent.detail == 1) { 
     $('.main-div').slideToggle('slow'); 
    } 
    }); 
}); 

Answer 5

$(document).ready(function() { 
 
    var res = false; 
 
    $('.toggler').on('click', function(event) { 
 
     event.preventDefault(); 
 
     if(!res){ 
 
      res = true; 
 
      $('.main-div').slideToggle("slow", function() { 
 
      res = false; 
 
      }); 
 
     } 
 
     
 
    }); 
 
});

* {margin: 0px; box-sizing: border-box;} 
 
.main-div {width: 80%; float: right; height: 200px; background: #ddd;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="toggler">Toggle</button> 
 
<div class="main-div"></div>

Answer 6

添加禁用屬性上點擊那麼一旦動畫完成刪除。

$(document).ready(function() { 
 
    $('.toggler').on('click', function(event) { 
 
     $(this).attr('disabled', 'disabled'); 
 
     event.preventDefault(); 
 
     $('.main-div').slideToggle('slow', function(){ 
 
      $('.toggler').removeAttr('disabled'); 
 
     }); 
 
    }); 
 
});

* {margin: 0px; box-sizing: border-box;} 
 
.main-div {width: 80%; float: right; height: 200px; background: #ddd;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="toggler">Toggle</button> 
 
<div class="main-div"></div>

Answer 7

你可以簡單地過濾掉元素，而它正在動畫，因此從來沒有排隊多個切換就可以了：

$('.main-div').not(':animated').slideToggle('slow'); 

在保持這種狀態下你自己的軌跡沒有點在一些布爾值時jQuery爲你做，並讓你寫功能！

的完整代碼（你原來的例子修改）：

$(document).ready(function() { 
    $('.toggler').on('click', function(event) { 
     event.preventDefault(); 
     $('.main-div').not(':animated').slideToggle('slow'); 
    }); 
}); 

僅供參考，您嘗試將工作過，如果你正確地重新綁定的事件處理函數，但是這是一個非常清晰的解決方案。