禁用链接以停止JQuery中的双击

他们被点击一次后,我将如何禁用与button类的所有链接? 我希望能够在一个地方做到这一点,而不必单独改变他们所有的想法?

到目前为止,我得到这个:

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

但第二个事件不是射击

这是我会尝试的:

 $("a.button").one("click", function() { $(this).click(function () { return false; }); }); 

绑定类“button”的所有链接。 运行匿名函数只有一次(因此“一”),重新链接返回false。

如果你想保持它看起来更像你所拥有的,试试这个:

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

如果您使用链接,我有一个优雅的解决scheme:

 function do_nothing() { return false; } // prevent a second click for 10 seconds. :) $('.prevent_doubleclick').live('click', function(e) { $(e.target).click(do_nothing); setTimeout(function(){ $(e.target).unbind('click', do_nothing); }, 10000); }); 

ssoroka/prevent_doubleclick.html

我将很快添加对表单的支持。

是的,设置一个值来跟踪这个:

 $("a").click(function (){ if( $(this).data("clicked") ){ return false; } $(this).data("clicked", true); return true; }); 

创build一个JS – 将其包含在每个页面上(或者在你的主页上,如果有的话)。

我觉得像

 $(document).ready(function(){ $('.button').click(function(){ $('.button').click(function(e) { e.preventDefault(); }); }); }); 

你也可以在锚标签上扔一个类,然后点击:

 $('a.button').click(function(){ if($(this).hasClass('clicked')) return false; else { $(this).addClass('clicked'); return true; } }); 

在课程中,您可以在第一次点击之后对链接进行一些额外的devise。

 $('a.button').bind('click', function(){ alert('clicked once'); // for debugging // remove all event handlers with unbind() // add a new function that prevents click from working $(this).unbind().bind('click', function(){ alert('clicked a 2nd time or more'); // for debugging return false; }); }); 

这适用于IE和Chrome与锚标签上的href和onclick属性:

 $(document).ready( function() { $('a.button').on("click", function(event) { $('a.button').prop('onclick',null); $('a.button').removeAttr('href'); }); }); 

事件只绑定在document.ready上,你应该用.live事件来处理:

 $("a.button").live("click", function() { $(this).attr("disabled", "disabled"); }); $("a[disabled]").live("click", function() { return false; }); 
 $("a.button").bind('click', function() { $(this).attr("disabled", "disabled"); }); $("a[disabled]").live('click', function() { return false; }); 

可以。 第一行使用类button绑定到所有的a元素,一个函数设置(btw对a元素无效)禁用的属性。

第二个函数使用jQuery实时事件绑定将“禁用”函数绑定到所有未来的a元素的实例,这些实例的属性已禁用

如果需要,请查看jQuery Event文档以获取有关这两个使用函数的更深入的信息

您可能需要禁用窗体上的Ajax提交,并点击button:

  $("form").attr("data-ajax", "false"); $("[type='submit']").click(function (e) { var form = $("form"); if (!this.disabled) { if (form.valid()) { this.disabled = true; form.submit(); } } }); 

我喜欢亚当提供的解决scheme的想法,但是这并不适合我。 如果使用.one()在点击后禁用链接时遇到问题,build议尝试以下操作。

 $("a.button").bind("click", function( event ) { // Unbind the click event from anchors with class button $(this).unbind( event ); }); 

我相信你是在谈论一个共同的问题,你只是不希望链接/button被一次点击多次。 也许你真的不想禁用button或链接,你只是想在第一次点击完成之前阻止“另一次点击”。

如果您想要点击之间的延迟,以下是其中一个选项:

 //prevent double click $(document).on('click', ".one-click", function(e){ if($(this).data('lastClick') + 1000 > new Date().getTime()){ e.stopPropagation(); return false; } $(this).data('lastClick', new Date().getTime()); return true; }); 

接下来需要做的是给button或链接一类“一键”。

事件被注册到文档,它也可以用于dynamic加载的html。

代码中的1000是延迟一秒。 即在第一次点击的1秒内,任何点击都被忽略。 根据需要更改延迟值。

当我想停止Bootstrap模式(启用了修改和Ajax)不止一次popup时,我遇到了这个问题。 上面的解决scheme虽然没有帮助,但是需要使用Bootstrap模式的“show”和“hide”事件来防止双重popup。

 $('a.disableAfterOneClick').on('click', function(e){ e.preventDefault(); //disabling default behaviour if (this.href) //checking if href attr is stil set { href = this.href; //saving current href for it will be removed $(this).removeAttr("href"); //removing href window.location.href = href; //redirecting user to href } }); 

我使用这个来禁用“点击”事件发送两次(而不是“双击”事件)。 适用于IE> = 9,firefox,webkit或chrome。 第一次单击事件在一段时间内禁用button/链接/跨度。 经过一段时间后,button/链接/跨度启用,用户可以点击它。

 $(document).ready(function() { /** * disable double click **/ document.addEventListener('click', function(event) { var targetElement = event.target || event.srcElement; var target = $(targetElement); var eLink = target.prop("tagName") === 'A'; // hypertext link var eButton = target.prop("tagName") === 'BUTTON'; // button var fButton = target.prop("tagName") === 'SPAN' && target.parent().parent().hasClass("fbutton"); // flexigrid buttons if ( eLink || eButton || fButton ) { if ( target.data("clicked") ) { event.stopPropagation(); event.preventDefault(); if ( window.console ) { console.log("double click event disabled"); } return false; } else { target.data("clicked", true); target.prop('disabled', true); target.addClass("clicked"); setTimeout(function() { target.data("clicked", false); target.prop('disabled', false); target.removeClass("clicked"); }, 500); // Do something after 500 millisecondes return true; } } }, true); }); 

这应该在你使用一个函数的时候有效

 var clickRunning = false; function OpenSth(){ if (clickRunning) return; clickRunning = true; yourFunc({ /* do your stuff*/ },500, function () { clickRunning= false; }); } 

你总是为一件s make事情而烦恼。

第一次点击时设置延时器自复位variables。 这会在一段时间内禁用第二次点击。 简单!

  var formvar=1; $('#myForm').submit(function() { if(formvar==1) { $(this).ajaxSubmit(options); // or do what ever normally do setTimeout(function(){formi=1}, 3000); formvar=0; } else alert("no dbl clicking"); });