只允许点击一次，不允许双击

Question

我需要让我的提交按钮只点击一次以防止双击。

这是某人发布的一种方法：

    $(document).ready(function () { 
      $("#submit").one('click', function (event) 
      {   
         event.preventDefault(); 
         //do something 
         $(this).prop('disabled', true); 
      }); 
    }); 

1) 据我了解，.one 只会被触发一次。 如果是这样，我不确定 event.preventDefault() 和 $(this).prop('disabled', true) 的需求是什么，因为点击只完成一次。这本身就是解决办法。从测试中，我注意到如果我双击，它只会发生一次（尝试不使用 preventdefault 和禁用）

2) 如果 .one 没有按照我在 1) 中假设的那样做，我理解 $(this).prop('disabled', true); 的部分。禁用按钮但不太明白 为什么我们需要 event.preventDefault();据我了解，它将阻止默认操作，在这种情况下是提交。如果这是真的，那么 event.preventDefault(); 有什么用？因为我们确实想提交它，但只提交一次。

3) .one 本身不会阻止双击。我对此是否正确？所以不需要其余的逻辑，正确吗？

Answer 1

在我看来，他想阻止提交按钮的默认操作完成，也就是将表单发布到服务器。

禁用按钮本身会使它在大多数浏览器中看起来呈灰色，因此它只是直接表明按钮已被单击。提供动作的视觉反馈使其对最终用户更有用。

所以：按钮的单击只能执行一次，因此是一次，但他不希望提交表单。可能在//do something 中，他想进行一个ajax 调用左右。

Answer 2

我认为回答这个问题的人一定考虑过防故障解决方案，

event.preventDefault(); - 实现.click 的目的是在表单数据实际提交之前对其进行处理。如果您有<input type="submit"，它将在执行处理程序之前提交表单，除非它被阻止。

如果您使用<button> 或<input type="button"..，则不需要e.preventDefault()。

$(this).prop('disabled', true); - 防止键盘空格相当于按钮点击。

而.one 将防止双击。