Prevent selection in HTML

Question

I have a div on a HTML page and whenever I press the mouse and move it, it will show that "can't drop" cursor like it selects something. Is there a way to disable selection? I tried CSS user-select with none without success.

Horsa

Answer 1

The proprietary variations of user-select will work in most modern browsers:

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

For IE < 10 and Opera, you will need to use the unselectable attribute of the element you wish to be unselectable. You can set this using an attribute in HTML:

<div id="foo" unselectable="on" class="unselectable">...</div>

Sadly this property isn't inherited, meaning you have to put an attribute in the start tag of every element inside the <div>. If this is a problem, you could instead use JavaScript to do this recursively for an element's descendants:

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

makeUnselectable(document.getElementById("foo"));

Closelipped

it's not selected but still copied to the clipboard (according to the MDC spec at goo.gl/5P8uH) – Sickert

@ithkuil: Interesting. Looks like -moz-none is the way to go. I'll amend my answer. – Closelipped

In Firefox 5, -moz-none seems not to be autocompleted by Firebug although none is: -moz-user-select: none (works) – Prothalamion

@Lekensteyn: Both work to prevent selection, but there is notionally a difference: developer.mozilla.org/en/CSS/-moz-user-select. However, the following does not seem to back this up in Firefox 5: jsfiddle.net/vhwJ5/2. – Closelipped

i'm pretty sure user-select only deals with text and no other kind of elements – Steffens

Answer 2

It's seem CSS user-select don't prevent image drag and drop... so..

HTML :

<img src="ico.png" width="20" height="20" alt="" unselectable="on" /> Blabla bla blabla

CSS :

* {
     user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
}

::selection { background: transparent;color:inherit; }
::-moz-selection { background: transparent;color:inherit; }

JS :

$(function(){
    $('*:[unselectable=on]').mousedown(function(event) {
        event.preventDefault();
        return false;
    });
});

Chrischrism

You can use "img" selector but be carefull with "event.preventDefault();" because no others events associated with "mousedown" will work on them in your page... – Chrischrism

Answer 3

I use cancelBubble=true and stopPropagation() in the mouse down and move handlers.

Armour

What snagged me was that you need it in both the mouse down and move handlers, not just the move one! – Maunder

Answer 4

event.preventDefault() seems to do the trick (tested in IE7-9 and Chrome) :

jQuery('#slider').on('mousedown', function (e) {
    var handler, doc = jQuery(document);
    e.preventDefault();
    doc.on('mousemove', handler = function (e) {
        e.preventDefault();
        // refresh your screen here
    });
    doc.one('mouseup', function (e) {
        doc.off('mousemove', handler);
    });
});

Errick

Thank you for this, searched for awhile on the proper way to block a select I list I was blocking on click, since disabled values don't post..... haha – Coffman

Answer 5

Have you got some sort of transparent image that your selecting? Usually the "cant drop" icon appears when you drag an image. Otherwise it normally selects text when you drag. If so you might have to put the image behind everything using z-index.

Dupondius