如何在jQuery中单击检测两次

Question

在单击事件中，如何双击就知道这一点。 如果点击，我想退货； 但是怎么知道是双击？

 <hr style="clear:both; width:100%;" /> <p id="testClick">Click here</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function () { $("#testClick").click(function () { //if double click: console.log("2"); and return //else // do some thing console.log("1"); }); }); </script> 

Answer 1

从单击处理程序中就无法知道。 您将必须构建一个类似于此答案的自定义逻辑： 如何在jquery中单击检测两次

我建议您听这两个事件，并围绕此事建立自己的逻辑。 如果您只需要了解双击，就不要听单击。

使用dblclick事件处理程序：

 <hr style="clear:both; width:100%;" /> <p id="testClick">Click here</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function () { $("#testClick").click(function () { console.log("click"); // Here do nothing ! }); $("#testClick").dblclick(function () { console.log("double click"); }); }); </script> 

Answer 2

另一个答案基本上是正确的，但是要复杂一些

 <hr style="clear:both; width:100%;" /> <p id="testClick">Click here</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function () { var isDoubleClick = false; $("#testClick").click(function () { setTimeout(function() { if(!isDoubleClick) { console.log("1"); } }, 500); }); $("#testClick").dblclick(function () { console.log("2"); isDoubleClick = true; setTimeout(function() { isDoubleClick = false; }, 1000); }); }); </script> 

如果出于某种原因不想使用dblclick处理程序，请使用numClicks ++而不是布尔值。