¿Hay alguna forma de distinguir un evento de clic que lo mantenga distinto de cuando el usuario realmente termina arrastrando el mouse? Tengo un texto que está lleno de enlaces y quiero que sea fácil para el usuario hacer clic y arrastrar sobre el texto para seleccionar parte del texto, pero los enlaces lo dificultan, ya que el navegador lo interpreta como si trataran de arrastrar el vínculo, en lugar de seleccionar algún texto. Entonces, mi solución a este problema fue usar <a onClick=...> en lugar de <a href> , ya que el navegador me permite arrastrar el mouse sobre eso como si fuera texto normal.
Sin embargo, esto solo parece funcionar si hago un solo clic y arrastro el mouse sobre dos etiquetas <a> separadas: si la selección es completamente interna a una etiqueta <a> , el evento aún se dispara, y si trato de hacer doble clic y arrastrar sobre el texto también dispara.
Entonces, me pregunto si hay una forma de hacer esto que no sea usar onMouseDown y onMouseUp y realizar un seguimiento manual de los retrasos para determinar qué está haciendo el usuario.
Soy consciente de que algunos navegadores ofrecen la opción de arrastrar enlaces manteniendo presionada una tecla modificadora, pero tengo curiosidad por saber si hay una forma más sencilla de hacerlo que no requiera que los usuarios conozcan esa funcionalidad.
Si bien esto podría ser factible, considere la accesibilidad y cómo se adaptará a las necesidades de sus proyectos. La navegación con onclick no brinda los mismos beneficios de accesibilidad, además requiere reinventar muchas cosas que el navegador puede hacer de forma gratuita.
Sé que los dispositivos móviles normalmente permiten una pulsación larga para acceder a una combinación de selección de texto/menú contextual; en el escritorio, variará según el dispositivo/navegador.
La única implementación de "detectar solo clic" en la que puedo pensar sería usar tres controladores con mousedown , mouseup y mousemove . ¡Código no probado por delante!
let clicked = false; document.addEventListener('mousedown', e => { clicked = true; }); document.addEventListener('mousemove', e => { clicked = false; }); document.addEventListener('mouseup', e => { if(clicked) { // The mouse was clicked without moving it around! // Do your "only clicked" logic in here. } // Reset this back to false for next time clicked = false; });Gracias a @Connor Deckers por la idea y por este sitio
let clicked = false; let dbclicked = false; let move = false; document.addEventListener('mousedown', e => { clicked = true; }); document.addEventListener('mousemove', e => { move = true; }); document.addEventListener('dblclick', e => { dbclicked = true; }); document.addEventListener('mouseup', e => { if(clicked && !move && !dbclicked) { // The mouse was clicked without moving it around! // Do your "only clicked" logic in here. console.log("clicked without drag and not a double click "); } if(dbclicked) { // The mouse was double clicked // Do your "double clicked" logic in here. //console.log("dbclicked"); } // Reset this back to false for next time clicked = false; move = false; dbclicked = false; });