开发者

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

开发者 https://www.devze.com 2023-02-23 16:32 出处:网络
I have a basic table, like this: <tabl开发者_如何学JAVAe> <tbody> <tr> <td>Column 1</td>

I have a basic table, like this:

<tabl开发者_如何学JAVAe>
    <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?


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


Try changing

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

to

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

this should prevent the doubleclick from doing anything the browser will do at default. You should test this code in all browsers though, not sure if it will work everywhere.

0

精彩评论

暂无评论...
验证码 换一张
取 消