Why do I get an entry into the dblclick handler when double click was not issued?

Question

I have JSFiddle with a resizable box. When double-clicking anywhere on the document, the box color toggles between beige and red.

The problem is that sometimes when releasing the left mouse button after resizing the box, a dblclick event is generated and the box turns red. And sometimes you can release the mouse button without changing the box color, but then if you click just once in the box it generates the dblclick and changes the box color.

Usually, everything works fine: I resize and there's no dblclick entry. I have to try maybe 20 times to get a false dblclick event.

I'm using Chrome.

I could partially fix this particular instance of the problem by adding code to the dblclick handler to ignore the entry if a resize is in progress. That still doesn't fix the dblclick entry, though, that happens (very rarely) when I resize , get no dblclick, but then get a dblclik when I click just once in the box.

But rather than just get the JSFiddle here to work, what I'm looking for here is the reason this dblclick is generated. Am I using the dblclick event incorrectly? Is there a known bug with this event and perhaps a better solution? Is there some kind of switch bounce going on with the mouse button?

$(function() {
    $("#box").resizable();
    $(document).dblclick(function(e){
        console.log("double-clicked on ",  e.target);
        $("#box").toggleClass("red");
    });
});

Answer 1

It can be related to your hardware, I guess it is also affected by your system's "double click delay" setting.

Using Firefox, if I repeatedly click&drag with small, close motions, I do trigger the dblclick event, and I would say it is normal behaviour. I don't see dblclicks poping out of nowhere with 5 secs spaced clicks, though.

To help you track a possible cause for your bug, try to also log the mousedown and mouseup events :

$(document).mousedown(function(e){
    console.log("    mousedown on ",  e.target);
});
$(document).mouseup(function(e){
    console.log("    mouseup on ",  e.target);
});

fiddle