Eventos del Mouse 1 Parte

Imagina la web como un escenario donde cada clic, cada movimiento del mouse es un acto en el espectáculo interactivo que tus usuarios experimentan. Desde el simple "clic" que desencadena una acción hasta el "arrastre" que transforma elementos en la pantalla, cada evento del mouse es una oportunidad para cautivar y sorprender a tus visitantes. "Parrafo hecho por Gpt"

Necesitaba un intro y lo hizo! pero en definitva realizar un sitio donde la experiencia de usuario sea un atractivo para más visitas en nuestro sitio o app web es nuestro objetivo como desarrolladores frontend. Por este motivo es necesario conocer todas las herramientas y apis del navegador, hoy he resumido las más interesantes en mi punto de vista que nos ofrece los eventos del mouse.

mousedown: Se dispara cuando se presiona un botón del mouse en un elemento.

document.getElementById('miElemento').addEventListener('mousedown', function() {
  console.log('Presionaste un botón del mouse.');
});        

mouseup: Se dispara cuando se suelta un botón del mouse en un elemento.

document.getElementById('miElemento').addEventListener('mouseup', function() {
  console.log('Soltaste un botón del mouse.');
});        

click: En este punto creo que todos lo hemos utilizado. Se dispara cuando se hace clic en un elemento.

document.getElementById('miElemento').addEventListener('click', function() {
  console.log('Hiciste clic en el elemento.');
});        

dblclick: se activa cuando se hace doble clic en el botón de un dispositivo señalador (como el botón principal del mouse); es decir, cuando se hace clic rápidamente dos veces en un solo elemento en un lapso de tiempo muy corto. Te muestro un ejemplo completo el cual crea una card simple y cuando le das doble click cambia de tamaño

<! -- HTML -->
<aside>
  <h3>My Card</h3>
  <p>Double click to resize this object.</p>
</aside>        

/*--CSS-- */
aside {
  background: #fe9;
  border-radius: 1em;
  display: inline-block;
  padding: 1em;
  transform: scale(0.9);
  transform-origin: 0 0;
  transition: transform 0.6s;
  user-select: none;
}

.large {
  transform: scale(1.3);
}        

//JS
const card = document.querySelector("aside");

card.addEventListener("dblclick", (e) => {
  card.classList.toggle("large");
});          

MouseEvent.button propiedad de solo lectura indica qué botón se presionó en el mouse para activar el evento.

Esta propiedad solo garantiza indicar qué botones se presionan durante eventos causados por presionar o soltar uno o varios botones. Como tal, no es confiable para eventos como mouseenter, mouseleave, mouseover, mouseouto mousemove.

• 0: Botón principal presionado, generalmente el botón izquierdo o el estado no inicializado
• 1: Botón auxiliar presionado, generalmente el botón de la rueda o el botón central (si está presente)
• 2: Botón secundario presionado, generalmente el botón derecho
• 3: Cuarto botón, normalmente el botón Atrás del navegador
• 4: Quinto botón, normalmente el botón Avanzar del navegador

<button id="button" oncontextmenu="event.preventDefault();">
  Click here with your mouse…
</button>
<p id="log"></p>        

let button = document.querySelector("#button");
button.addEventListener("mouseup", (e) => {
  let log = document.querySelector("#log");
  switch (e.button) {
    case 0:
      log.textContent = "Left button clicked.";
      break;
    case 1:
      log.textContent = "Middle button clicked.";
      break;
    case 2:
      log.textContent = "Right button clicked.";
      break;
    default:
      log.textContent = `Unknown button code: ${e.button}`;
  }
});        

Utilidades

Selección correcta de un texto, cuando necesite que un usuario seleccione una parte especifica de un texto pero de forma correcta podemos utilizar lo siguiente

Antes del texto...
<b ondblclick="alert('Click!')" onmousedown="return false">
  Haz doble click en mí
</b>
...Después del texto        

En este ejemplo si damos doble click podemos mostrar una notificación al usuario de como debe marcar este texto ya que si intenta seleccionar no puede dentro de ¨Haz doble click en mi¨ solo va a poder seleccionar si empieza a marcar antes de este texto o despues. Parece un poco confuso pero en verdad es simple.

Prevenir copias, si queremos inhabilitar la selección para proteger nuestro contenido de la página del copy-paste, entonces podemos utilizar el evento: oncopy

<div oncopy="alert('¡Copiado prohibido!');return false">
  Querido usuario!,
  El copiado está prohibida para ti 😏.
  Si sabes JS o HTML entonces puedes obtener todo de la fuente de la página.
</div>        

Si intenta copiar un fragmento de texto en el <div> no va a funcionar porque la acción default de oncopy fue evitada.

Seguramente el usuario tiene acceso a la fuente HTML de la página, y puede tomar el contenido desde allí, pero no todos saben cómo hacerlo.

Esto puede ser el inicio de una infinidad de cosas que podemos realizar para que el usuario tenga una buena experiencia y proteger de alguna manera nuestro contenido, en una siguiente entrega veremos más sobre eventos y coordenadas.

Te dejo referencias, Saludes