Disable mouse selection using JavaScript

Question

I'm trying to disable select using mouse down using the following code

var unFocus = function () {
  if (document.selection) {
    document.selection.empty()
  } else {
    window.getSelection().removeAllRanges()
  }
}

document.getElementById("v_6").onmousemove = function () {
    unFocus()
}
document.getElementById("v_6").onmousedown = function () {
    unFocus()
}

My main issue is that I would like to have the code for onmousedown & onmousemove at the same time. so right now if I move the mouse without selecting the with onmousedown it removes the curser but I don't want that to happen. I would like to have it that if both events happen at the same time then it execute the function. Any help with that would be much appreciated

If using JavaScript for this isn't actually a requirement, this is a duplicate of [this question](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting) and you'll find the answer (which is good news) there. :-) *(I've also posted it as a community wiki below in hopes of staving off the eighteen posts that would have done so.)* — T.J. Crowder, Feb 20 '18 at 14:13

T.J. Crowder · Accepted Answer · 2018-02-20T14:22:33.427

2

Two answers:

1. If you really want to call unFocus when the mouse moves while the primary ("left") button is down, you can do that with just a mousemove handler, no mousedown handler is required, because the event object has a buttons value which has bitflags for which buttons are down; more on MDN:

document.getElementById("v_6").onmousemove = function () {
    if (e.buttons & 1 === 1) { // true when the primary button is down
        unFocus()
    }
};

2. But if you just need to disallow user selection, and it doesn't have to be in JavaScript, just use user-select: none in CSS for the elements:

/* I've used #v_6 to match your example, but obviously it can be any selector */
#v_6 {
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}

Example:

.no-select {
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}

<div>You can select this text...</div>
<div class="no-select">...but not this text</div>

edited Feb 20 '18 at 14:22

answered Feb 20 '18 at 14:11

T.J. Crowder

879,024
165
1,615
1,639

your code works for me great. but the only problem I would like help with is that I don't want to use v_6 as my selector. as this will restrict the code to that id only. I need to do something that would take any text area... would you be able to help with that? – Fabian Feb 20 '18 at 14:30
@Fabian: Which approach are you going to take, #1 or #2? If #2, again, the selector can be any selector... – T.J. Crowder Feb 20 '18 at 14:44
the css didn't work at all. but the JS is working. just need to do it .. I've added the following code but it won't work – Fabian Feb 20 '18 at 14:58
$(window).load(function() { $(':input').addClass('coco'); }); document.getElementsByClassName("coco").onmousemove = function (e) { if (e.buttons & 1 === 1) { unFocus() } } – Fabian Feb 20 '18 at 14:59
@Fabian: All due respect, the CSS works perfectly on any vaguely modern browser. But if you're using jQuery: `$(document).on("mousemove", ".coco", function(e) { if (e.originalEvent.buttons & 1 == 0) { unFocus(); } });` – T.J. Crowder Feb 20 '18 at 14:59
that's great,, again I'm sure your css may work with other setup! but not successful at my case :( – Fabian Feb 20 '18 at 15:08
Also, do you know how can I stop double click select, please ? – Fabian Feb 20 '18 at 15:09

Disable mouse selection using JavaScript

1 Answers1