开发者

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

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

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜