Question

说我有4个按钮

    <button id="one">One</button>
    <button id="two">Two</button>
    <button id="three">Three</button>
    <button id="four">Four</button>

并且为了防止垃圾邮件，我想这样做，以便每当按下任何按钮时，在接下来的0.6秒内都不能再次按下它们。

我怎么能实现这个目标？

Answer 1

您可以使用此javascript代码：

var btns = document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++){
    btns[i].addEventListener('click', function(){
        disableButtons(true);
        setTimeout(function(){disableButtons(false);}, 600);
    });    
}
function disableButtons(state){
    for(var i=0;i<btns.length;i++){
        btns[i].disabled = !!state;    
    }
}

当然，您需要在加载页面后运行此代码。

Answer 2

这样做的一种方法是使用＆＃34;点击盾牌＆＃34;。

以下是如何使用jQuery实现的。

var clickShield = false;
$('button').on('click', function() {
  if (!clickShield) {
    clickShield = true;
    console.log('handle click event');
    setTimeout(function() {
      clickShield = false;
    }, 600);
  }
});

Answer 3

使用jQuery，您可以执行以下操作：

<button id="one">One</button>
<button id="two">Two</button>
<button id="three">Three</button>
<button id="four">Four</button>

$("button").on("click", function(e) {
    $("button").attr('disabled', 'disabled');
    setTimeout(function() {
        $("button").removeAttr('disabled');
    }, 600);
});

Answer 4

// Get button elements
var els = document.getElementByTagName('button');

// Add an event handler to click event
// that triggers settimeout to set the disable value
els.addListener('click', function(){
  setTimeout(els.disable, 600);
}, true);

未经过测试

Answer 5

就像prasadmadanayake在评论中所说，你可以通过禁用/启用按钮来实现。

这是一个有效的例子：

var intVal = 0;
$('button').on('click',function (e) {
    var id = $(this).attr('id');
    $('#'+id).attr('disabled', 'disabled');
    setTimeout(function(){enable(id)}, 3000);
                               
    return true;
});

function enable (id) {
    $('#'+id).removeAttr('disabled');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <button id="one">One</button>
    <button id="two">Two</button>
    <button id="three">Three</button>
    <button id="four">Four</button>

按下按钮后添加定时延迟以防止按钮垃圾邮件

5 个答案: