How can I prevent text/element selection with cursor drag

Question

I made a paging control and I noticed that while clicking on the buttons it is very easy to accidentally select the individual images and text. Is it possible to prevent this?

To clarify selecting I mean highlighting with the mouse. (Try dragging your mouse from one side of the screen to the other.)

If you try to highlight the text/controls in this grid it can't be selected. How is that done? Link

possible duplicate of http://stackoverflow.com/questions/2700000/how-to-disable-text-selection-using-jquery — kapa, Mar 25 '11 at 07:55
another possible duplicate http://stackoverflow.com/questions/2326004/prevent-selection-in-html — Javi R, Mar 25 '11 at 08:02

score 132 · Accepted Answer · answered Mar 25 '11 at 12:23

132

dragging and selecting both initialize on a mouse down event and update on subsequent mouse moves. When you handle the events to begin dragging, or to follow the mouse, cancel the event's bubbling and override the default browser return:

something like this in your begin dragging mousedown and move handlers-

e=e || window.event;
pauseEvent(e);

function pauseEvent(e){
    if(e.stopPropagation) e.stopPropagation();
    if(e.preventDefault) e.preventDefault();
    e.cancelBubble=true;
    e.returnValue=false;
    return false;
}

answered Mar 25 '11 at 12:23

kennebec

102,654
32
106
127

23

Yeah e.preventDefault() should be all you need in modern browsers. The rest of the code is redundant: window.event is for older versions of IE, but since those events don't have the preventDefault method and the return false is not returned at the pauseEvent function call... it doesn't do anything (not even in 2011). – Sjeiti Jun 29 '15 at 21:15
32

CSS: `user-select: none;` is what I use. No need for JS to solve this any more I should think – Drenai Dec 25 '17 at 19:16
1

@Drenai That also makes the content unselectable for good. Make sure you only apply that during dragging. – Farzad Yousefzadeh Jul 18 '21 at 09:19
@Farzad Yousefzadeh Nope, dragging doesn't factor into it. No need for icon/text of a button to be selectable – Drenai Jul 18 '21 at 13:20
2

@Drenai what do you mean by "dragging doesn't factor into it"? Dragging still invokes pointer events similar to text selection. Try applying `user-select: none` to an element and dragging over it. Sure there are elements that don't need to be selectable. All I'm saying is to mention the unwanted side effects of that line of CSS if used incautiously. – Farzad Yousefzadeh Jul 20 '21 at 08:13
@Farzad Yousefzadeh what you're describing isn't an unwanted side effect of `user-select: none`, that's just it's purpose – Drenai Jul 20 '21 at 10:31
2

@Drenai You're missing my actual point. My point was `user-select: none` disables text selection regardless of what state of dragging you're in. Using `preventDefault` on the correct pointer events only disables it during the dragging. – Farzad Yousefzadeh Jul 20 '21 at 12:19
Using `event.preventDefault();` might cause have a problem with `input`'s `onblur`. In case when we type some text in `input` and then start drag (`mousedown` with `preventDefault`) `input`'s `onblur` will not trigger. – Dmitry Kurmanov Aug 16 '21 at 07:44
@Drenai If I want to apply custom drag-click functionality on specific elements that shouldn't invoke further events on the page, then this solution is helpful – Shane Callanan Jul 29 '22 at 11:48
This prevents the element from becoming active which leads to some annoyances for styling- i.e. having styles while dragging. – Carson Crane Jul 15 '23 at 09:58

score 67 · Answer 2 · answered Oct 03 '13 at 16:16

67

For dragging, you're capturing the mousedown and mousemove events. (And hopefully touchstart and touchmove events as well, to support touch interfaces.)

You'll need to call event.preventDefault() in both the down and move events in order to keep the browser from selecting text.

For example (using jQuery):

var mouseDown = false;
$(element).on('mousedown touchstart', function(event) {
  event.preventDefault();
  mouseDown = true;
});
$(element).on('mousemove touchmove', function(event) {
  event.preventDefault();
  if(mouseDown) {
    // Do something here.
  }
});
$(window.document).on('mouseup touchend', function(event) {
  // Capture this event anywhere in the document, since the mouse may leave our element while mouse is down and then the 'up' event will not fire within the element.
  mouseDown = false;
});

answered Oct 03 '13 at 16:16

Robin Daugherty

7,115
4
45
59

Thanks Robin, out of curiosity is there a difference between `window.document` and `window` or just `document`? I'm pretty sure `document` is a child of `window`.. – The Muffin Man Oct 03 '13 at 17:39
1

`window` is the outermost scope in which Javascript runs in the browser. So any variable not declared inside a function is a property of `window`. Referencing `document` directly is actually referring to `window.document`. – Robin Daugherty Oct 09 '13 at 23:37
4

As far as I can tell it suffices to cancel default on only the "mousedown" event. – tremby Feb 04 '17 at 02:36

score 48 · Answer 3 · answered Sep 05 '18 at 03:19

48

This is a very old post. It may not answer exactly that situation, but i use CSS for my solution:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

answered Sep 05 '18 at 03:19

Mike

649
1
12
17

this wont work when I wanted to edit contenteditable – Jenuel Ganawed Sep 13 '21 at 09:28

AndreaBogazzi · Answer 4 · 2013-09-27T00:21:36.537

I wanted to comment, but i don't have enough reputation. Using the suggested function from @kennebec solved my problem in my javascript dragging library. It works flawlessy.

function pauseEvent(e){
    if(e.stopPropagation) e.stopPropagation();
    if(e.preventDefault) e.preventDefault();
    e.cancelBubble=true;
    e.returnValue=false;
    return false;
}

i called it in my mousedown and mousemove custom function, immediately after i can recognize i clicked on the right element. If i call it just on top of the function i just kill any click on the document. My function is registered as an event on document.body.

score 10 · Answer 5 · answered Mar 25 '11 at 07:53

10

try this:

document.onselectstart = function()
{
    window.getSelection().removeAllRanges();
};

answered Mar 25 '11 at 07:53

Alex Pacurar

5,801
4
26
33

1

try this: $('yourDivSelector').getSelection().removeAllRanges() – Alex Pacurar Mar 25 '11 at 07:58
1

The `selectstart` event doesn't exist in Firefox. – Tim Down Mar 25 '11 at 09:17

score 9 · Answer 6 · edited May 23 '17 at 12:26

9

This can be achieved using CSS in most browsers and the unselectable expando in IE. See my answer here: How to disable text selection highlighting using CSS?

edited May 23 '17 at 12:26

Community

1
1

answered Mar 25 '11 at 09:43

Tim Down

318,141
75
454
536

1

This is a much better answer than the accepted, bypassing the event completely – rtpax Dec 14 '16 at 05:03
when you use user-select: none; in css it won't let drag even fire – zEn feeLo Mar 01 '22 at 06:08
This should be higher up. Simple and very effective. – brianxk Jul 10 '23 at 14:00

score 1 · Answer 7 · answered Nov 17 '17 at 10:06

1

If you need to block text selection for a certain element using JavaScript, then the simplest method for me was to assign userSelect style like this:

var myElement = document.createElement('div');
myElement.style.userSelect = 'none';

answered Nov 17 '17 at 10:06

Erkki Teedla

309
2
8

score 0 · Answer 8 · answered Aug 27 '15 at 09:27

0

simply prevent it by calling blur() function when selected as following :

 <input Value="test" onSelect="blur();">

answered Aug 27 '15 at 09:27

Mehdi

9
1

score 0 · Answer 9 · answered Oct 02 '22 at 13:51

0

Just paste this code in your JavaScript somewhere

document.onmousemove = function(evt){
 event.preventDefault();
}

I debugged that just now on https://www.colorzilla.com/gradient-editor/ and tested it in the console and it worked, no more unwanted UI selection...

answered Oct 02 '22 at 13:51

no_one

19
7

it prevents to select text inside textbox – Billy Feb 14 '23 at 14:37

score 0 · Answer 10 · answered Nov 10 '22 at 18:05

Something working well for me is to preventDefault on the mousemove event unless an onselectstart event is fired.

const handler = event => event.preventDefault();

document.onmousedown = () => document.addEventListener("mousemove", handler);
document.onmouseup = () => document.removeEventListener("mousemove", handler);
document.onselectstart = () => document.removeEventListener("mousemove", handler);

This allows me to still handle text selection correctly on elements with user-select: auto.

11 years later, I hope this helps someone!

How can I prevent text/element selection with cursor drag

10 Answers10

Linked