Double-click without selecting content

Question

How can I prevent the content of a <td> from being selected when the <td> is double-clicked?

If I manually single-click anywhere in the page following the double-click, the content (selected by the double-click) is un-selected.

However, if I trigger that single-click programatically, the content actually stays selected...

$(".tableCell").dblclick(function(){
    $("body").click();
});

This gives the same result:

$(".tableCell").dblclick(function(){
    return false;
});

FIDDLE: http://jsfiddle.net/eYpY6/1/

Answer 1

Borrowed from this SO answer: How to disable text selection highlighting using CSS?

You can use this:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

in a CSS rule, see fiddle: http://jsfiddle.net/KyleMuir/eYpY6/2/

No JS needed :)

Hope this helps.

Answer 2

Borrowed from another answer: Prevent text selection after double click

$(document).ready(function(){
$(".tableCell").dblclick(function(){
clearSelection();
});
});

function clearSelection() {
if(document.selection && document.selection.empty) {
    document.selection.empty();
} else if(window.getSelection) {
    var sel = window.getSelection();
    sel.removeAllRanges();
}
}

Fiddle here: http://jsfiddle.net/eYpY6/3/

Answer 3

A little late here, but I thought that I'd share this answer. You can disable text selecting on double-click only using a version of the code I wrote in this JSFiddle for this SO question, which asked for CSS (but I couldn't find an answer, so gave a Javascript answer in case that OP was okay with that). Basically, the code calls for changing click history on double-clicks and then programmatically re-selecting what was previously selecting. This was achieved using selectionStart and selectionEnd. I'm sure there's a more elegant solution, but this is what I have for now.