How to disable text selection on a table in a tricky situation?

Question

I have a basic table, like this:

<table>
    <tbody>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
    </tbody>
</table>

On the rows I have a double click function with jQuery:

$('tr').live('dblclick',function(){
    dosomething();
    return false;
});

I also have a plugin called tablednd that uses mousedown/up function on the rows. The double clicking causes text selection on the cells.

How can I prevent this?

Answer 1

You can't use select() event because it is limited to input elements.

Instead, try preventDefault() on the selectstart event...

$('tr').bind('selectstart', function(event) {
    event.preventDefault();
});

jsFiddle.

Alternatively, you can use CSS...

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