防止在 jQuery one() 函数上点击跳转答案

【问题标题】：Prevent click jump on jQuery one() function防止在 jQuery one() 函数上点击跳转
【发布时间】：2011-03-02 22:54:40
【问题描述】：

我在 jQuery 中使用one() 函数来防止多次点击。但是，当他们第二次单击该元素时，它会执行令人讨厌的单击跳转并将您带回页面顶部。

有没有办法防止这种情况发生？取消绑定单击并在函数完成后重新绑定具有相同的结果（我假设 one() 无论如何只是取消绑定事件）。

一个简单的例子：http://jsfiddle.net/iwasrobbed/FtbZa/

【问题讨论】：

标签： javascript jquery clickonce preventdefault

【解决方案1】：

我不确定这是否更好，但您可以绑定一个简单的函数来维护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;});

【讨论】：

【解决方案2】：

尝试更改 href 以便不使用“#”：http://jsfiddle.net/FtbZa/1/

$('.someLink').one('click', function() {
    alert('test');
    return false;
}).attr('href', 'javascript:void(0);');

【讨论】：

制作 href="javascript:;"通常为我做。但是，不确定是否有任何副作用。
+1 谢谢 McHerbie，不过我现在想回避内联 javascript

【解决方案3】：

您可以使用标准的.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，这样下次点击它时，它将忽略您的代码。

查看演示here

【讨论】：

【解决方案4】：

问题在于，在侦听器解除绑定后，没有什么可以阻止浏览器接受链接（它被视为锚标记）并尝试访问它。（在这种情况下，它只会指向页面顶部。

【讨论】：