防止在jQuery one()函数上单击跳转

时间:2011-03-02 22:54:41

标签: javascript jquery clickonce preventdefault

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

有没有办法防止这种情况发生?在完成函数时取消绑定点击并重新绑定它具有相同的结果(我假设one()只是取消绑定事件。)

这种情况的一个简单示例:http://jsfiddle.net/iwasrobbed/FtbZa/

4 个答案:

答案 0 :(得分:4)

我不确定这是否更好,但您可以绑定一个维护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;});

答案 1 :(得分:3)

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

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

答案 2 :(得分:2)

您可以使用标准.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");
   });
  1. 收听someLink课程clicked的任何内容
  2. 停止浏览器执行通常的操作。
  3. 检查对象是否包含班级clicked 请注意,这可能是您想要的任何名称
  4. 它没有那么做。
  5. 添加课程{{1}},以便下次点击时,它会忽略您的代码。
  6. 请参阅演示.click()

答案 3 :(得分:1)

问题是,在侦听器未被绑定之后,没有什么能阻止浏览器尊重链接(它将其视为锚标记)并试图转向它。 (在这种情况下,这只会导致页面顶部。