如何阻止光标拖动文本/元素选择

try this:

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

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?

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

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.

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

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

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

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';

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;

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...

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!