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.

Tim Down · Accepted Answer · 2012-08-09T09:49:58.233

177

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"));

edited Aug 09 '12 at 09:49

answered Feb 24 '10 at 12:45

Tim Down

318,141
75
454
536

it's not selected but still copied to the clipboard (according to the MDC spec at http://goo.gl/5P8uH) – mkm Nov 30 '10 at 11:23
@ithkuil: Interesting. Looks like `-moz-none` is the way to go. I'll amend my answer. – Tim Down Nov 30 '10 at 12:15
In Firefox 5, `-moz-none` seems not to be autocompleted by Firebug although `none` is: `-moz-user-select: none` (works) – Lekensteyn Aug 03 '11 at 22:37
@Lekensteyn: Both work to prevent selection, but there is notionally a difference: https://developer.mozilla.org/en/CSS/-moz-user-select. However, the following does not seem to back this up in Firefox 5: http://jsfiddle.net/vhwJ5/2/. – Tim Down Aug 03 '11 at 23:44
1

i'm pretty sure `user-select` only deals with text and no other kind of elements – oldboy May 18 '17 at 00:23

molokoloco · Answer 2 · 2011-03-25T17:19:46.473

12

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;
    });
});

edited Mar 25 '11 at 17:19

answered Mar 25 '11 at 17:11

molokoloco

4,504
2
33
27

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... – molokoloco May 09 '15 at 10:11

score 5 · Answer 3 · edited Nov 08 '15 at 18:23

5

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

edited Nov 08 '15 at 18:23

Gonzalo.-

12,512
5
50
82

answered Feb 24 '10 at 13:53

kennebec

102,654
32
106
127

2

What snagged me was that you need it in _both_ the mouse down and move handlers, not just the move one! – Matthew Schinckel Jul 24 '12 at 01:06

score 4 · Answer 4 · answered May 22 '13 at 15:29

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);
    });
});

answered May 22 '13 at 15:29

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 – thekevshow Feb 18 '16 at 16:00

score 1 · Answer 5 · answered Feb 24 '10 at 12:46

1

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.

answered Feb 24 '10 at 12:46

Michal Ciechan

13,492
11
76
118

Prevent selection in HTML

5 Answers5

Linked

Related