代码之家 › 专栏 › 技术社区 › Rohit Sharma

如何防止连续点击元素?

jquery javascript

Rohit Sharma · 技术社区 · 8 年前

我想防止连续点击按钮 .toggler

我们的期望是,如果我单击按钮,它的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>

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

但这并没有像预期的那样奏效。

任何帮助都将不胜感激<3.

7 回复 | 直到 5 年前

Ankit Agarwal 8 年前

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>

Berkay YaylacÄ± 8 年前

试试这个,

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

Lars Peterson 8 年前

var inMotion = false;

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

当 slideToggle() 函数完成后,该回调将运行。回调将布尔值设置为false,允许它再次启动。

Seb Cooper 8 年前

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

Lennholm 8 年前

您可以在设置动画时简单地过滤掉元素,因此永远不会对其进行多个切换:

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

当jQuery为您执行此操作并允许您进行功能性编写时,您自己在一些布尔值中跟踪此状态是没有意义的!

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

仅供参考,如果您正确地重新绑定了事件处理程序函数,您的尝试可能会奏效,但这是一个更干净的解决方案。

Krupesh Kotecha A.T. 8 年前

你可以这样试试。。。

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

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

Feras Al Sous WSchnuble 8 年前

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