jQuery允许单击但不允许双击。

Question

我最初希望单击事件触发提交：

    $("#booking_Form #submit_Booking").bind("click", function(event){.....

显而易见，我发现双击导致了重复提交。

因此，我尝试使用以下方式来捕获和抑制这种情况：

    $("#booking_Form #submit_Booking").bind("dblclick", function(event){
          return false;
    });

但是单击事件仍然触发了两次。

如果必须确保双击不会重复提交，那么我需要将单击事件更改为双击事件。

或者是否有一种全局方法可以关闭双击。

- codepuppy

---

在单击后禁用按钮可以解决您的问题吗？ - Scott Simpson

尝试在事件上添加延迟。这样，您可以清除第二个事件并只提交一次。我使用了KeyUp事件来实现这一点，以便用户可以在运行ajax请求之前输入几个键（2~3个）。 - Nick.T

我认为Scott的想法是正确的。JQuery自己的文档说明绑定单击和双击事件的事件处理程序是不可取的，因为结果是不可预测的。相反，像Scott建议的那样禁用按钮应该是有效的。 - Peter

@ScottSimpson，也许会有影响，但是使用JS事件时可能不会，因为第二次点击可能会在代码禁用按钮之前发生。 - Nick.T

是的，禁用它确实可以，但它不是一个input type="submit"按钮。我不确定是否可以在第一次点击后停止对我的定制按钮的第二次点击？ - codepuppy

是的，同一选择器上同时存在单击和双击事件确实不是一个好主意。因此，我必须使用setTimeout来封装函数内部的ajax。如何终止/清除第二个或后续的点击？@Nick.T - codepuppy

Answer 1

你应该使用.one()。这样，所有后续的点击都不会有任何反应。

$("#booking_Form #submit_Booking").one("click", function(event) {
    //do something
});

链接：http://api.jquery.com/one/

编辑： 如果您想使用 .one()，可以尝试以下操作...

JAVASCRIPT：

$(document).ready(function(){
     $("#b1").one("click", function(e){
        ajaxFunction();
     });   

    function ajaxFunction(){
         $("#b1").one("click", function(e){
             ajaxFunction()
         });

        $.ajax({
            type: "POST",
            url: "http://fiddle.jshell.net/", //use actual URL
            success: function(data){
               //do something    
            }
        });           
    }
});​

DEMO: http://jsfiddle.net/BKqm9/13/

- Dom

---

好的，看起来不错，我以前没有遇到过这种情况。然而，在阅读有关文档的评论时，似乎没有一种方法可以在ajax完成后重置它。而整个目标是避免刷新。你有什么想法如何重置它吗？ - codepuppy

当然，我已经对我的初始帖子进行了编辑。希望它能有所帮助！ - Dom

非常抱歉没有完全理解这个。我真的很喜欢使用 .one - 我称之为伪绑定 - 但我不知道你在哪里重置它。如果是函数调用自身的那一部分，我很想知道它如何产生所需的效果。 - codepuppy

没关系！好的，那么我们最初将 .one() 绑定到 $("#b1") 上并调用了 ajaxFunction 函数。在 ajaxFuntion 函数中，我们进行了“重置”绑定。正如你所见，我再次将 .one() 绑定到 $("#b1") 上，然后才发起 ajax 调用。这是因为 .one() 只能运行一次。通过重新绑定 .one()，我们创建了一个循环，因此按钮单击事件将始终运行一次。 - Dom

好的，非常整洁。谢谢你抽出时间来解释这个。 - codepuppy

Answer 2

在点击处理程序中禁用您的输入，以便用户无法再次点击，当您完成单击处理程序中的逻辑时，将再次启用它。因此，您可以按照以下步骤操作：

$("#booking_Form #submit_Booking").bind("click", function(event){
   $(this).attr('disabled','true');
   ...
   ...
   var btn = $(this);
   $.ajax('someurl.php',{success: function(){
          ...
          ...
          btn.removeAttr('disabled');
    }
   })
}

- Nelson

---

是的，我能看到这一点，除了我没有使用type="submit"按钮。因为我在函数内部使用了一个ajax调用，而不是表单的提交函数。 - codepuppy

这是一个ajax函数的相同代码，只需在ajax调用的成功回调中重新启用按钮。我已经更新了我的答案，提供了一个ajax示例。 - Nelson

好的，我之前没有意识到“disabled”可以这样使用。我之前只将其应用于表单提交按钮。所以这是很好的学习经验，比起折腾“dblclick”要容易得多。但是我注意到我无法让“removeattr”起作用，改用“removeAttr”就可以了。 - codepuppy

哦，亲爱的 - 我不能接受两个答案！我喜欢 .one 的方法。然而，这个更传统且更易于理解。因此，我给了两个答案投票。 - codepuppy

Answer 3

你可以将其放在闭包中并使用一个dirty flag变量。(闭包使得该标志不是全局的)

(function(){
    var dirtyFlag = false;
    $('#clicker').click(function(){
        if (dirtyFlag) return;
        dirtyFlag = true;
        setTimeout(function(){
            console.log('clean and proceeding');
            dirtyFlag = false;
        }, 500);
    });
})();​

在这里查看Fiddle。由于禁用按钮不是一个选项，因此我认为这是最简洁和最简单的解决方案。

- Snuffleupagus

Answer 4

如果您想要排队的方法，请尝试类似这样的方式：（仅为模拟）

$('<div>').clearQueue('buttonQueue');

$("#booking_Form #submit_Booking").bind("click", function(event) {
    $('<div>').clearQueue('buttonQueue');
    $('<div>').queue('buttonQueue', myFunctionHere());
});

将此代码放在 DocumentReady 函数中应该没问题。

- Nick.T

Answer 5

这可能会有帮助：

$("#booking_Form #submit_Booking").bind("click", function(e) {

    // custom handling here
    e.preventDefault();
    e.stopPropagation();
}​

试试看吧。

- palaѕн

Answer 6

在执行逻辑之前，您可以在单击后禁用按钮，在执行代码后，您可以启用按钮单击事件。这很简单 -

$("#saveOrder").attr("disabled", true);

你的逻辑在这里

$("#saveOrder").attr("disabled", false);

- sandip