我在 jQuery 中使用one()函数来防止多次点击。但是,当他们第二次单击该元素时,它会执行令人讨厌的单击跳转并将您送回页面顶部。
有没有办法防止这种情况发生?取消绑定单击并在功能完成时重新绑定它具有相同的结果(我假设one()
无论如何只是取消绑定事件)。
发生这种情况的一个简单示例:http: //jsfiddle.net/iwasrobbed/FtbZa/
我在 jQuery 中使用one()函数来防止多次点击。但是,当他们第二次单击该元素时,它会执行令人讨厌的单击跳转并将您送回页面顶部。
有没有办法防止这种情况发生?取消绑定单击并在功能完成时重新绑定它具有相同的结果(我假设one()
无论如何只是取消绑定事件)。
发生这种情况的一个简单示例:http: //jsfiddle.net/iwasrobbed/FtbZa/
我不确定这是否更好,但您可以绑定一个简单的函数来维护return false
.
jQuery 为此提供了一个快捷方式.bind('click',false)
。
$('.someLink').one('click', function() {
$(this).bind('click',false);
return false;
});
或者,如果您有多个这样的链接,一个非常有效的替代方法是使用delegate()
[docs]方法将处理程序绑定到为您处理的共同祖先return false;
。
在这里,我只使用了body
,但您可以使用更近的祖先。
$('.someLink').one('click', function() {
});
$('body').delegate('.someLink','click',function(){return false;});
尝试更改 href 以便不使用“#”:http: //jsfiddle.net/FtbZa/1/
$('.someLink').one('click', function() {
alert('test');
return false;
}).attr('href', 'javascript:void(0);');
您可以使用标准.click()
功能和一些逻辑:
1. $('.someLink').click(function(event) {
2. event.preventDefault();
3. if (!$(this).hasClass("clicked"))
4. alert('This will be displayed only once.');
5. $(this).addClass("clicked");
});
someLink
在课堂上听任何东西.click()
clicked
(请注意,这可以是您想要的任何名称)
clicked
,以便下次单击它时,它将忽略您的代码。在此处查看演示
问题是,在侦听器解除绑定后,没有什么可以阻止浏览器接受链接(它被视为锚标记)并尝试访问它。(在这种情况下,这只会导致页面顶部。