When I dblclick, it runs .click twice

Question

I have 2 functions when you click on an item, .click and .dblclick The problem is, that when you dblclick, it runs the .click function twice. Is there a way to fix this?

$(".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

Per the jQuery documentation for the dblclick event:

It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.

You want to change your events so that you don't have a .click and .dblclick on the same element.

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++;
});

reference e.preventDefault();

Answer 3

As others mentioned, you can't really bind both click and double click to the same item. There are, however, workarounds.

One way to handle this would be to handle the click code and then check for double-click:

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

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

This code essentially captures a "last click time" and if this click time is less than 500 milliseconds from the last click time, then it fires the double-click code. Otherwise it will fire the click code.

The downside with this is that the click-code will be called first and then the double-click code. Also, you're forcing your users into a 500ms double-click. While this is pretty standard, it's not guaranteed. (Slower clickers may have trouble with this.)

A JSFiddle that demonstrates this technique.

---

You could improve this code by setting a 500ms timeout for the click code and then cancelling the click event if a double-click is fired. The downside with this is that it will force a 500 ms delay between the click and the "click" code.

A JSFiddle that demonstrates the timeout.

Answer 4

If you don't mind handling one single-click, look at the event object details attribute. It is the number of clicks.

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

Answer 5

Juan's answer is a great workaround, however I believe it should be event.detail (singular).

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