使用 jQuery 防止双击链接答案

【问题标题】：prevent double clicks on links with jQuery使用 jQuery 防止双击链接
【发布时间】：2013-09-29 06:55:23
【问题描述】：

使用 jQuery 防止双击链接的最佳方法是什么？

我有一个触发 ajax 调用的链接，当该 ajax 调用返回时，它会显示一条消息。

问题是，如果我双击，或者在 ajax 调用返回之前单击它两次，我最终会在页面上显示两条消息，而我真的只想要一条消息。

我需要一个按钮上的disabled 属性。但这不适用于链接。

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

    //do ajax call
});

【问题讨论】：

你能添加你的代码或jsFIddle吗？
我还没有。
Disabling links to stop double-clicks in JQuery 的可能重复项
这就是 on() 和 off() 的用途 -> jsfiddle.net/e8MzH

标签： javascript jquery

【解决方案1】：

您可以使用data- 属性，如下所示：

$('a').on('click', function () {
   var $this = $(this);
   var alreadyClicked = $this.data('clicked');
   if (alreadyClicked) {
      return false;
   }
   $this.data('clicked', true);
   $.ajax({
      //some options
      success: function (data) { //or complete
         //stuff
         $this.data('clicked', false);
      }
   })
});

【讨论】：

【解决方案2】：

我带来了下一个简单的 jquery 插件：

(function($) {
  $.fn.oneclick = function() {
    $(this).one('click', function() {
      $(this).click(function() { return false; });
    });
  };
  // auto discover one-click elements
  $(function() { $('[data-oneclick]').oneclick(); });
}(jQuery || Zepto));

// Then apply to selected elements
$('a.oneclick').oneclick();

或者只是在html中添加自定义数据属性：

<a data-oneclick href="/">One click</a>

【讨论】：

【解决方案3】：

你需要async:false

默认情况下，所有请求都是异步发送的（即默认设置为 true）。如果您需要同步请求，请将此选项设置为false。

$.ajax({
      async: false,
      success: function (data) { 

         //your message here
      }
   })

【讨论】：

这对我有什么好处？
这将在第一个请求的响应到达后发送下一个请求
有趣。我得试一试。如果有人捣碎链接，他们会排队吗？
如果您设置 async: true 则该语句将开始执行，并且无论异步语句是否已完成都将调用下一条语句
设置 async:true 会冻结浏览器，直到请求完成，这优于 AJAX 的异步特性。

【解决方案4】：

你可以为此使用一个虚拟类。

$('a#anchorID').bind('click',function(){
           if($(this).hasClass('alreadyClicked')){
              return false;
           }else{
                $(this).addClass('alreadyClicked);
                $/ajax({
                    success: function(){$('a#anchorID').removeClass('alreadyClicked');},
                    error: function(){$('a#anchorID').removeClass('alreadyClicked');}
                });
           }});

【讨论】：

【解决方案5】：

Check this example。您可以在第一次单击后通过 CSS 属性禁用按钮（并在 ajax 请求或使用 setTimeout 后删除此属性）或使用 jQuery.one() 函数在第一次单击后删除触发器（不禁用按钮）

var normal_button = $('#normal'),
  one_button = $('#one'),
  disabled_button = $('#disabled'),
  result = $('#result');

normal_button.on('click', function () {
  result.removeClass('hide').append(normal_button.html()+'<br/>');
});

one_button.one('click', function () {
  result.removeClass('hide').append(one_button.html()+'<br/>');
});

disabled_button.on('click', function () {
  disabled_button.attr('disabled', true);
  setTimeout(function () {
    result.removeClass('hide').append(disabled_button.html()+'<br/>');
  }, 2000);
});

【讨论】：

【解决方案6】：

虽然提供了一些很好的解决方案，但我最终使用的方法是只使用一个<button class="link">，我可以设置disabled 属性。

有时最简单的解决方案是最好的。

【讨论】：

【解决方案7】：

您可以使用 Jquery 第二次禁用该链接上的点击事件

$(this).unbind('click');

请参阅此 jsfiddle 以供参考 Demo

【讨论】：

我说的是链接。不是表单/按钮
这里你没有指定你的代码，所以我只是给出了你的提示，你可以通过它来实现你的要求。

【解决方案8】：

您可以禁用您的链接（例如 href="#" ），并使用 click 事件代替，使用 jQuery one() 函数绑定到链接。

【讨论】：

【解决方案9】：

用“按钮”类绑定所有链接并试试这个：

$("a.button").click(function() { $(this).attr("disabled", "disabled"); });
$(document).click(function(evt) {
     if ($(evt.target).is("a[disabled]"))
          return false;
});

【讨论】：