禁用链接以停止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"); });