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.
精彩评论