Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

424
Views
How can I prevent text/element selection with cursor drag

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

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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;
}
over 4 years ago · Santiago Trujillo Report

0

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;
});
over 4 years ago · Santiago Trujillo Report

0

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;
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!