使用锚点而不是按钮时,如何防止按钮混合？

Question

我正在使用按钮通过Ajax提交数据.我正在使用jQuery来禁用和启用按钮.这是为了防止"按钮混合",用户可以恶意或无意地发出多个请求.

是否有一种"元素无关"的方法来防止jQuery中的这种行为？例如,假设我想使用锚点而不是按钮来提交数据.我可以禁用一个按钮; 但据我所知,你无法禁用锚点.

我现在就是这样做的:(注意我删除了一些不必要的代码以缩短它)

 $('.fav .button').click(function() {
  $.ajax({
   context: this,
   dataType: 'json',
   beforeSend: function() {
    // Toggle state; disable button to prevent button mashing
    $(".fav").toggleClass("fav-state-1");
    $(".fav .button").attr("disabled", true);
   },
   error: function() {
    // Rollback state and re-enable button on error
    $(".fav").toggleClass("fav-state-1");
    $(".fav .button").attr("disabled", false);
    },
   success: function(response) { 
    if (response.result == "success") { 
     $(".fav .button").attr("disabled", false);
    } 
    else {
     // Rollback state; re-enable button
     $(".fav").toggleClass("fav-state-1");
     $(".fav .button").attr("disabled", false);
    }
   }
  });
  return false;
 });

HTML:

<input class="button" type="button" value="">

Answer 1

当然,最好的方法是在服务器端优雅地处理它.

也就是说,您可以使用jQuery中的数据存储方法来存储一个值,以指示它已被单击,并使用它来确定用户是否已单击/按下按钮.每个选择器都存储这些值,因此您可以在任何选项上进行设置.

$("a").click(function(e) {
    e.preventDefault();

    if (!$(this).data('isClicked')) {
        var link = $(this);

        // Your code on successful click

        // Set the isClicked value and set a timer to reset in 3s
        link.data('isClicked', true);
        setTimeout(function() {
            link.removeData('isClicked')
        }, 3000);
    } else {
        // Anything you want to say 'Bad user!'
    }
});

好处是你不会阻止用户点击任何其他内容,因为它是每个元素的解决方案.在您的情况下,您可能希望link.removeData在成功函数中执行此操作.

工作示例:http://jsfiddle.net/jonathon/ke8Az/(请注意,如果您尝试在3s内再次点击,则会收到"请稍候",但您仍然可以点击其余部分)

注意:这只是一个客户端解决方案.并且只有他们安装了JavaScript.除非您在服务器端处理它,否则用户可以恶意发送多个请求.这只是帮助"不知不觉"的部分.