jquery cancelling select event

Question

Whenever the user does a mousedown on an HTML document and drags the mouse before he releases the button, the content he's moving over becomes selected.

I'm creating a jquery slider and I'd like to cancel this event so that when the user drags his mouse with the mouse down over when the mouse is over text, the text isn't selected.

This example works: http://www.filamentgroup.com/examples/slider/index2.php

If you start the mousedown when the cursor is over the "This is an example from the..." text, the text is selected.

However, if you start the mousedown when the cursor is over the scroll elevator and then move the mouse over the "This is an example from the..." text, the text is NOT selected while you're moving the cursor over the text.

How did they cancel the selection of the text?

Thanks.

Tim Down · Accepted Answer · 2012-08-09T09:51:56.627

I'd suggest creating a CSS class and adding it to the body element when the mousedown event fires and removing it when the mouseup event (or the window blur event) fires:

CSS:

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none; /* From IE 10 */
   user-select: none;
}

JavaScript:

function switchUnselectable(node, unselectable) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", unselectable ? "on" : "off");
    }
    var child = node.firstChild;
    while (child) {
        switchUnselectable(child, unselectable);
        child = child.nextSibling;
    }
}

function switchSelection(unselectable) {
    if (unselectable) {
        $("body").addClass("unselectable");
    } else {
        $("body").removeClass("unselectable");
    }
    switchUnselectable($("body")[0], unselectable);
}

var $sliderEl = $("#yourSliderId");

$sliderEl.mousedown(function() {
    switchSelection(true);
});

$sliderEl.mouseup(function() {
    switchSelection(false);
});

$(window).blur(function() {
    switchSelection(false);
});

score 0 · Answer 2 · answered Mar 25 '11 at 20:34

0

<div onselectstart="return false;" ondragstart="return false;">
  Go ahead, just try to select me!
</div>

Here's an example!

answered Mar 25 '11 at 20:34

mVChr

49,587
11
107
104

EWWWW, inline Javascript. There must be a way using jQuery to avoid this. – rockerest Mar 25 '11 at 20:37

score 0 · Answer 3 · answered Mar 25 '11 at 21:04

0

if you are trying to create a slider, you can directly use the jQuery UI slider unless you application needs some different functionality. Hope this helps. :\

answered Mar 25 '11 at 21:04

Bunty

39
3

score 0 · Answer 4 · answered Mar 26 '11 at 02:02

The most straightforward solution is to prevent default on the mousedown event, which I suspect is what the linked page uses. You can often do this in the same event handler that starts tracking mouse movement on your slider. For instance, assuming jQuery:

$slider.mousedown(function(e){
    e.preventDefault();
    // Start tracking mouse movement
});

Some newer browsers have CSS properties which do the same job (described in other answers), but this is the simplest and most widely-used trick.

Bonus!

You can accomplish the same thing by returning false from your event handler. This asks jQuery to prevent default on the event for you, and stop propagation of the event to event handlers on parent nodes.

jquery cancelling select event

4 Answers4

Bonus!