Question

我正在使用此代码块来防止不耐烦的客户多次单击并向我们的服务器发送多个请求。

<script>
    function prevent_click() { 
        return false;
    }

    $('a, input[type=submit], input[type=button]').on('click', function(e) { 
        $(e.currentTarget).click(prevent_click); 

        setTimeout(function(){
            $(e.currentTarget).unbind('click', prevent_click);
        }, 3000);

    });
</script>

它会在第一次单击后3秒钟内阻止点击事件，但是会对相同的链接，按钮等执行此操作。如何为所有链接运行此事件，而不是单独运行？

Answer 1

只需设置一个标志来防止这种默认操作：

var preventClick = false;
$('a, input[type=submit], input[type=button]').on('click', function(e) {
    $('div').text( preventClick ? 'Click blocked' : 'Allowed' );
    if (preventClick) {
        e.preventDefault();
        e.stopPropagation();
    } else {
        preventClick = true;
        setTimeout(function() {
            preventClick = false;
        }, 3000);
    };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">I am link</a>
<input type="submit" value="Submit" />
<input type="button" value="Button" />
<div>Click result...</div>

请注意stops propagation，

防止事件使DOM树冒泡，从而防止事件发生通知父处理程序。

也在JSFiddle上。

Answer 2

您可以像这样在所有href标签上简单地尝试e.preventDefault（）：

$('a').on('click',function (e) {
    e.preventDefault();
});

Answer 3

单击按钮时，应全局禁用按钮像这样：

$(document).on('click', 'button', function()
{
   $(this).attr("disabled", "disabled");
});

全面防止多次点击

3 个答案: