How do I cancel a text selection after the initial mousedown event?

Question

I'm trying to implement a pop-up menu based on a click-and-hold, positioned so that a (really) slow click will still trigger the default action, and with the delay set so that a text-selection gesture won't usually trigger the menu.

What I can't seem to do is cancel the text-selection in a way that doesn't prevent text-selection in the first place: returning false from the event handler (or calling $(this).preventDefault()) prevents the user from selecting at all, and the obvious $().trigger('mouseup') doesn't doesn't do anything with the selection at all.

• This is in the general context of a page, not particular to a textarea or other text field.
• e.stopPropogation() doesn't cancel text-selection.
• I'm not looking to prevent text selections, but rather to veto them after some short period of time, if certain conditions are met.

Answer 1

Try this:

var input = document.getElementById('myInputField');
if (input) {
    input.onmousedown = function(e) {

     if (!e) e = window.event;
     e.cancelBubble = true;
     if (e.stopPropagation) e.stopPropagation();

    }
}

And if not, have a read of:

http://www.quirksmode.org/js/introevents.html

Answer 2

$(this).focus() (or anything along the lines of document.body.focus()) seems to do the trick, although I haven't tested it much beyond ff3.

Answer 3

I'm not sure if this will help, exactly, but here is some code to de-select text:

// onselectstart is IE-only
if ('undefined' !== typeof this.onselectstart) {
    this.onselectstart = function () { return false; };
} else {
    this.onmousedown   = function () { return false; };
    this.onclick       = function () { return true;  };
}

"this" in this context would be the element for which you want to prevent text selections.

Answer 4

In addition to the top thread, there is an official way to implement what I think you want in DOM. What you can use in lieu of events is something called a range object.

Consider, (which works definitively on FF3)

window.onclick = function(evt)
{
   // retrieves the selection and displays its content
   var selectObj = window.getSelection();
   alert(selectObj);

   // now collapse the selection to the initial point of the selection
   var rangeObj = selectObj.getRangeAt(0);
   rangeObj.collapse(true);
}

Unfortunately, this doesn't quite fly with IE, Opera, Chrome, or Safari; not sure why, because in Opera, Chrome, or Safari, there is something associated with the collapse and getRangeAt methods. If I know more, I'll let you know.

---

An update on my previous answer, one that works more universally is the selection object and collapse, collapseToStart, collapseToEnd methods. (link text)

Now consider the 2.0 of the above:

window.onmouseup = function(evt)
{
   var selectObj = window.getSelection();
   alert(selectObj); // to get a flavor of what you selected

   // works in FF3, Safari, Opera, and Chrome
   selectObj.collapseToStart();

   // works in FF3, Safari, Chrome (but not opera)
   /* selectObj.collapse(document.body, 0); */

   // and as the code is native, I have no idea why...
   // ...and it makes me sad
}