Question

我想阻止继续点击按钮private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e) { var vm = DataContext as YourViewModel; vm.Height = ActualHeight; vm.Width = ActualWidth; }。当我点击它时，div正在切换，但如果我点击它继续很多次div切换多次，直到我的点击事件还没有完成。

期望是如果我点击按钮，它的点击事件应该关闭，直到div没有正确切换。之后，它的点击应该是打开的。

点击该按钮多次以查看问题。

write_file('/documents/stanford_data.txt', $encodedString, 'c');

.toggler

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

我尝试过的jQuery代码是：

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

但上面的代码无效......！

任何帮助都将不胜感激。

Answer 1

slideToggle具有回调函数，该函数在操作完成时调用。因此，您可以引入一个新的布尔变量，该操作在操作开始时将设置为false，并在切换完成后更改回true。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

试试这个，

$(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 3

只需使用一个布尔值，它将在幻灯片开始和停止时切换。

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 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

点击时添加disabled属性，然后在动画完成后将其删除。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 6

你可以简单地在元素被动画时过滤掉元素，从而不会在其上排队多个切换：

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

没有必要在jQuery为你做的时候用一些布尔值跟踪这个状态，并让你在函数上写一下！

完整代码（修改原始示例）：

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

仅供参考，如果您正确地重新绑定事件处理函数，您的尝试将会起作用，但这是一个更清晰的解决方案。

Answer 7

$(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>

如何防止继续点击该元素？

7 个答案: