How to deselect text after mousedown start event?

Question

I am trying to implement a pop-up menu based on click and hold, so that the (really) slow click still triggers the default action and with the delay set so that the text selection gesture usually does not call up the menu.

What I cannot do is deselect the text so that it does not prevent the text from being selected 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')one does nothing with the selection at all.

• This is in the general context of the page, not in a text box or other text box.
• e.stopPropogation() does not deselect the text.
• I am not going to prevent the selection of text, but rather veto them for a short period of time if certain conditions are met.

Answer 1

Try the following:

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, read:

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

Answer 2

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

Let's consider (what finally works 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);
}

, IE, Opera, Chrome Safari; , Opera, Chrome Safari -, collapse getRangeAt. , .

---

, , - , collapseToStart, collapseToEnd. ( )

2.0 :

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
}

Answer 3

, , , - :

// 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" , .

Answer 4

$(this).focus() ( - document.body.focus()), , , ff3.

Answer 5

: jquery?

( , .
, FF Chrome.)

:

    .attr('unselectable', 'on')

    '-ms-user-select': 'none',
    '-moz-user-select': 'none',
    '-webkit-user-select': 'none',
    'user-select': 'none'

    .each(function() {  // for IE
      this.onselectstart = function() { return false; };
    });

Answer 6

. IE 7-10 (, , 6).

cwillu-gmail.., shift-click ( , shift), , "". (, , , ). , . : ( onclick, onmouseup.. , )

var element = document.getElementById("myElementId");
element.onclick = function (event)
{
    // if (event.shiftKey) // uncomment this line to only deselect text when clicking while holding shift key
    {
        if (document.selection)
        {
            document.selection.empty(); // works in IE (7/8/9/10)
        }
        else if (window.getSelection)
        {
            window.getSelection().collapseToStart(); // works in chrome/safari/opera/FF
        }
    }
}