Chrome taking first double-click

Question

When people double-click in a large DIV on my page, I catch the double-click and create a small colored DIV inside the large DIV. I end my double-click handler with

    e.preventDefault();
    return false;

to keep the browser from getting the double-click.

This works fine in Firefox.

But in Chrome the first double-click in the large DIV, after the page loads turns the large DIV blue, and then goes on to create the small colored box.

For some reason Chrome got the first double-click before I did and thought I wanted to select the large DIV, so it turned it blue. (The blue is the same blue that Chrome gives everything that it selects. Double-click something on the Google search page to see it.)

Once I click off the large DIV to deselect it, the blue goes away and double-clicks in the large DIV no longer go to Chrome.

Can anyone explain how Chrome is getting the first double-click before I am, and how I can prevent this?

Thanks for your help.my

Please add a complete code example to your question. – j08691 Dec 02 '13 at 15:26 — j08691, Dec 02 '13 at 15:26

score 3 · Accepted Answer · answered Dec 02 '13 at 15:33

You could either add CSS to prevent selection on double-click in supported browsers:

div#element_to_target {
    -webkit-user-select : none;
    -moz-user-select    : none;
    -khtml-user-select  : none;
    -ms-user-select     : none;
}

or do it in the event handler

$('div').on('dblclick', function(e) {

    // do stuff

    if (window.getSelection) {
        window.getSelection().removeAllRanges();
    } else if (document.selection) {
        document.selection.empty();
    }
});

Thanks! Placing the style declarations on the large DIV fixed it. -webkit-user-select is he one it needed. — Steve, Dec 02 '13 at 16:01

Chrome taking first double-click

1 Answers1

Linked