当我 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 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 3

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

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

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 4

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

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

Answer 5

Juan 的回答是一个很好的解决方法，但我认为它应该是event.detail （单数）。

UIEvent.detail:https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail