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

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

• javascript
• jquery

Share Improve this question Follow edited Aug 21, 2013 at 13:24 Blazemonger 93.1k2727 gold badges145145 silver badges181181 bronze badges asked Aug 21, 2013 at 13:16 user2514244user2514244 8

• post your code or set up a fiddle. – Akki619 Commented Aug 21, 2013 at 13:17
• 2 This is another annoying problem I'm having. What's the other one? By the way, show us your code. We can't do magic here. – emerson.marini Commented Aug 21, 2013 at 13:18
• 8 "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." – Blazemonger Commented Aug 21, 2013 at 13:19
• 1 note: isn't the whole point of jQuery to masks these differences across browsers? – Karoly Horvath Commented Aug 21, 2013 at 13:21
• 1 @KarolyHorvath I don't think that is the point of jQuery... At least I would say that it aims to extend browsers' functionality more or less harmoniously. Although, many times it also does fulfill that awesome purpose. :) – Joum Commented Aug 21, 2013 at 13:24

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 4

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./dblclick/

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();

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.

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
    }
}