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毫秒，则会触发双击代码。否则它将触发点击代码。

这样做的缺点是首先调用点击代码，然后双击代码。此外，您强制用户进行500ms双击。虽然这是非常标准的，但并不能保证。（较慢的答题器可能有问题。）

演示此技术的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
    }
}

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

4 个答案: