¿Cómo puedo evitar la selección de texto / elemento con arrastrar el cursor?

Hice un control de paginación y noté que al hacer clic en los botones es muy fácil seleccionar accidentalmente las imágenes y el texto individuales. ¿Es posible prevenir esto?

Para aclarar la selección me refiero a resaltar con el mouse. (Intente arrastrar el mouse de un lado de la pantalla al otro).

Si intenta resaltar el texto / controles en esta cuadrícula, no se puede seleccionar. ¿Cómo se hace eso? Enlace

arrastrando y seleccionando ambos se inicializan en un evento de mouse down y se actualizan en movimientos posteriores del mouse. Cuando maneje los eventos para comenzar a arrastrar, o para seguir el mouse, cancele el burbujeo del evento y anule el retorno del navegador predeterminado:

algo como esto en su comenzar a arrastrar el mouse hacia abajo y mover controladores-

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

Para arrastrar, captura los eventos mousedowny mousemove. (Y con suertetouchstart y touchmoveeventos también, para admitir interfaces táctiles).

Tendrá que llamar event.preventDefault()tanto en el downymove eventos para evitar que el navegador seleccione texto.

Por ejemplo (usando 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;
});

Esta es una publicación muy antigua. Puede que no responda exactamente a esa situación, pero uso CSS para mi solución:

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

Quería comentar, pero no tengo suficiente reputación. El uso de la función sugerida de @kennebec resolvió mi problema en mi biblioteca de arrastre de JavaScript. Funciona a la perfección.

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

Lo llamé en mi función personalizada mousedown y mousemove, inmediatamente después de reconocer que hice clic en el elemento correcto. Si lo llamo justo encima de la función, simplemente elimino cualquier clic en el documento. Mi función está registrada como evento en document.body.

prueba esto:

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

Esto se puede lograr usando CSS en la mayoría de los navegadores y unselectableexpando en IE. Vea mi respuesta aquí: ¿Cómo deshabilitar el resaltado de selección de texto usando CSS?

simplemente evítelo llamando a la función blur () cuando se selecciona de la siguiente manera:

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

Si necesita bloquear la selección de texto para un determinado elemento usando JavaScript, entonces el método más simple para mí fue asignar un estilo userSelect como este:

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