javascript 防止使用 jQuery 双击链接

prevent double clicks on links with jQuery

提问by chovy

What's the best way to prevent a double-click on a link with jQuery?

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

I have a link that triggers an ajax call and when that ajax call returns it shows a message.

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

The problem is if I double-click, or click it twice before the ajax call returns, I wind up with two messages on the page when I really want just one.

问题是，如果我在 ajax 调用返回之前双击或单击它两次，当我真的只想要一条消息时，我会在页面上看到两条消息。

I need like a disabledattribute on a button. But that doesn't work on links.

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

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

    //do ajax call
});

采纳答案by chovy

Although there are some good solutions offered, the method I ended up using was to just use a <button class="link">that I can set the disabledattribute on.

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

Sometimes simplest solution is best.

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

回答by Artyom Neustroev

You can use data-attributes, something like this:

您可以使用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);
      }
   })
});

回答by Max Kamenkov

I came with next simple jquery plugin:

我带来了下一个简单的 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();

Or just add custom data atribute in html:

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

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

回答by Moeed Farooqui

You need async:false

你需要async:false

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false.

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

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

         //your message here
      }
   })

回答by coder

you can use a dummy class for this.

您可以为此使用虚拟课程。

$('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');}
                });
           }});

回答by thiagobraga

Check this example. You can disable the button via CSS attribute after the first click (and remove this attribute after an ajax request or with a setTimeout) or use the jQuery.one() function to remove the trigger after the first click (without disabling the button)

检查这个例子。您可以在第一次单击后通过 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);
});

回答by ygesher

You can disable your links (for instance, href="#"), and use a clickevent instead, binded to the link using the jQuery one()function.

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

回答by Ahsan Shah

Bind all the links with class "button" and try this:

将所有链接与“button”类绑定并尝试以下操作：

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

回答by Satyam Koyani

You can disable click event on that link second time by using Jquery

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

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

See this jsfiddle for reference Demo

请参阅此 jsfiddle 以供参考 Demo