Question

As you know, when a user double-click somewhere, Explorer tries to select the nearest objects (such as text, table-row etc.) like the picture below:

User can:

• select any text with one-click

User can’t

• select any object with double-click (in other words, when the user double-clicks on the list, jquery should deselect selected area)

So how can I do this? Hope it’s clear.

Note: I use double-click operation to enter the item.

Answer 1

I forgot, this is one of those edge cases where the default action can’t be cancelled in the event. In that case, you might want to use the CSS approach for Firefox and Chrome:

-moz-user-select: none;
-webkit-user-select: none;

And for Opera/IE:

$("#mytable td").prop("unselectable", "on");  // jQuery 1.6+
$("#mytable td").attr("unselectable", "on");  // jQuery 1.5-

---

If you want the user to still be able to drag-select, you might want to work in a solution like this:

$("#mytable td").bind("dblclick", function () {
    var $this = $(this);
    $this.prop("unselectable", "on").css({ 
        "moz-user-select" : "none", 
        "-webkit-user-select" : "none"
    });

    window.setTimeout(function () {
        var $this = $(this);
        $this.prop("unselectable", "").css({ 
            "moz-user-select" : "", 
            "-webkit-user-select" : ""
        });
    }, 0);
});