javascript - 当我 dblclick 时，它会运行 .click 两次

Question

当您单击一个项目时，我有 2 个函数，.click 和 .dblclick 问题是，当您 dblclick 时，它会运行 .click 函数两次。有没有办法来解决这个问题？

$(".item").click(function() {
    if (price[this.id] === 1) {
        consoleUpdate("This item is worth " +price[this.id]+ " coin");
    }
}

$("#fishItem").unbind("dblclick").bind("dblclick").dblclick(function() {
    coins = coins+1;
    coinUpdate();
    invFish1--;
    if (invFish1 === 0) {
        $("#fishItem").appendTo("#itemStage");
    }
});   

Answer 1

根据 dblclick 事件的 jQuery 文档：

不建议将处理程序绑定到同一元素的 click 和 dblclick 事件。触发的事件顺序因浏览器而异，有些在 dblclick 之前接收两个点击事件，而另一些只接收一个。双击灵敏度（被检测为双击的两次单击之间的最长时间）可能因操作系统和浏览器而异，并且通常是用户可配置的。

你想改变你的事件，这样你就没有.click和.dblclick在同一个元素上。

http://api.jquery.com/dblclick/

Answer 2

正如其他人所提到的，您不能真正将单击和双击绑定到同一个项目。但是，有一些解决方法。

处理此问题的一种方法是处理点击代码，然后检查双击：

var lastClickTime = 0;
$(".item").click(function() {
    var thisClickTime = (new Date).getTime();

    if (thisClickTime - lastClickTime < 500) {
        //Double-click
    }
    else {
        //Click
    }
    lastClickTime = thisClickTime;
});

此代码实质上捕获“最后一次点击时间”，如果此点击时间距离最后一次点击时间少于 500 毫秒，则它会触发双击代码。否则它将触发点击代码。

这样做的缺点是会先调用点击代码，然后再调用双击代码。此外，您还强迫您的用户在 500 毫秒内双击。虽然这是非常标准的，但不能保证。（较慢的答题器可能会遇到问题。）

演示此技术的JSFiddle。

---

您可以通过为单击代码设置 500 毫秒超时然后在触发双击时取消单击事件来改进此代码。这样做的缺点是它会在点击和“点击”代码之间强制延迟 500 毫秒。

一个演示超时的JSFiddle。

Answer 3

var cnt=1;
$( "#target" ).click(function(e) {

if(cnt==1)
{

// action on single click if you dont want anything in in single click then use here
e.preventDefault();

}else{

// work on double click
cnt=1;// again set counter 
}

cnt++;
});

参考e.preventDefault();

Answer 4

如果您不介意单击一次，请查看事件对象详细信息属性。它是点击次数。

$(".item").click(function(event) {
    if (event.details === 1) {
        //handle single click
    } else if (event.details === 2) {
        // handle double click
    }
}