Fondamenti degli eventi del mouse in JavaScript

Introduzione

In JavaScript, gli eventi del mouse permettono alla pagina di rispondere a ciò che l'utente fa con il puntatore: fare clic su un pulsante, passare il cursore su un link, trascinare un elemento o fare clic destro per un menu. Collegare degli script a questi eventi è il modo in cui un documento statico diventa un'interfaccia interattiva.

Questa guida copre l'intero set di eventi del mouse di base, i dati ottenuti dall'oggetto evento (quale pulsante, dove si trova il puntatore), la differenza importante tra mouseover e mouseenter, e diversi esempi eseguibili — un cambio di colore, un menu contestuale personalizzato, una canvas di disegno e il drag-and-drop. Gli eventi del mouse fanno parte della più ampia famiglia degli eventi del browser; se sei nuovo all'associazione di gestori, leggi prima Gestione degli eventi nel DOM.

Comprendere gli eventi del mouse in JavaScript

Un evento del mouse è un segnale che il browser genera quando l'utente interagisce con la pagina tramite un dispositivo di puntamento. Vi si risponde registrando un listener con addEventListener('eventName', handler). Il gestore riceve un oggetto MouseEvent che descrive cosa è accaduto.

Principali eventi del mouse

Un click completo è in realtà tre eventi in sequenza: mousedown → mouseup → click. Conoscere la sequenza aiuta quando un evento sembra "inghiottire" un altro.

Leggere l'oggetto MouseEvent

Ogni gestore del mouse riceve un oggetto evento con proprietà utili:

• event.clientX / event.clientY — posizione del puntatore relativa al viewport (la finestra visibile).
• event.pageX / event.pageY — posizione relativa all'intero documento, incluso lo scroll.
• event.offsetX / event.offsetY — posizione relativa al box dell'elemento target.
• event.button — quale pulsante: 0 = sinistro, 1 = centrale, 2 = destro.
• event.ctrlKey / event.shiftKey / event.altKey / event.metaKey — true se quel tasto modificatore era premuto durante l'evento.
• event.target — l'elemento su cui si trovava effettivamente il puntatore.

Scegliere la coordinata giusta è importante: usa clientX/clientY per posizionare qualcosa di fisso nella finestra, pageX/pageY per posizionare qualcosa all'interno di contenuto scorrevole, e offsetX/offsetY (o sottrai getBoundingClientRect()) per disegnare all'interno di un elemento specifico come una canvas.

Implementare gestori di eventi del mouse di base

Esempio: Creare un pulsante cliccabile

Considera un pulsante che cambia colore ogni volta che viene cliccato. Questa semplice interazione può essere implementata utilizzando l'evento click.

<div>
    <button id="colorButton">Click me to change color</button>
</div>
<script>
    document.getElementById('colorButton').addEventListener('click', function() {
        this.style.backgroundColor = this.style.backgroundColor === 'red' ? 'blue' : 'red';
    });
</script>

In questo esempio, ogni clic cambia il colore di sfondo del pulsante tra rosso e blu. Questo non solo migliora il feedback visivo, ma introduce anche gli utenti ai cambiamenti dinamici tramite interazioni semplici.

Interazione avanzata: evento doppio clic

Un evento di doppio clic può essere usato per alternare la dimensione del testo, fornendo un metodo rapido per ingrandire i contenuti.

<div>
    <p id="text">Double-click me to toggle text size.</p>
</div>
<script>
    document.getElementById('text').addEventListener('dblclick', function() {
        this.style.fontSize = this.style.fontSize === '16px' ? '32px' : '16px';
    });
</script>

Questo script aumenta la dimensione del font al primo doppio clic e la ripristina al successivo, rendendola una funzionalità pratica per migliorare la leggibilità.

mouseenter / mouseleave vs. mouseover / mouseout

Questa è la problematica più comune con gli eventi del mouse. mouseover/mouseout fanno bubbling: quando il puntatore attraversa un elemento figlio, mouseout si attiva sul genitore e mouseover si attiva di nuovo — quindi un gestore su un contenitore con figli si attiva ripetutamente. mouseenter/mouseleave non fanno bubbling e si attivano una sola volta quando il puntatore attraversa il bordo esterno dell'elemento, ignorando i movimenti tra i figli.

Regola pratica: per un semplice effetto hover su un elemento, preferisci mouseenter/mouseleave. Usa mouseover/mouseout solo quando vuoi deliberatamente rilevare l'ingresso negli elementi figlio (ad esempio, con la delegazione degli eventi).

Esempio: Evidenziazione del testo al passaggio del mouse

<div>
  <p id="hoverText">Hover over me to highlight.</p>
</div>
<script>
  document.getElementById('hoverText').addEventListener('mouseenter', function() {
    this.style.color = 'green';
  });
  document.getElementById('hoverText').addEventListener('mouseleave', function() {
    this.style.color = 'black';
  });
</script>

Questo esempio migliora l'interazione dell'utente cambiando il colore del testo in verde quando il mouse vi passa sopra e riportandolo al nero quando il mouse se ne va, mostrando l'uso di mouseenter e mouseleave.

Sfruttare il movimento del mouse

Esempio: Visualizzare le coordinate del mouse

In questo esempio, le coordinate del mouse vengono visualizzate in tempo reale mentre l'utente muove il mouse sul testo. Questo uso dell'evento mousemove è eccellente per le applicazioni che richiedono il tracciamento della posizione del mouse. Nota che mousemove può attivarsi decine di volte al secondo — mantieni il suo gestore leggero ed evita operazioni pesanti sul DOM al suo interno.

<div>
    <p id="mousePosition" style="height: 100px; background-color: orangered">
 Hover here to track your mouse position!
</p>
</div>
<script>
    document.getElementById('mousePosition').addEventListener('mousemove', function(event) {
        this.textContent = `Mouse Position - X: ${event.clientX}, Y: ${event.clientY}`;
    });
</script>

Questo esempio visualizza le coordinate x e y del cursore del mouse mentre si muove sul testo, fornendo un feedback in tempo reale all'utente.

Applicazioni avanzate

Implementare un menu contestuale personalizzato

I menu contestuali personalizzati sono un ottimo modo per migliorare l'interazione degli utenti con le opzioni del clic destro sul tuo sito. La chiave è event.preventDefault() all'interno del gestore contextmenu, che impedisce al menu integrato del browser di aprirsi in modo che il tuo possa prenderne il posto.

<div>
<p>Right Click anywhere to see a customized context menu other than the default one in the browser!</p>
</div>
<div>
    <div id="contextMenu" style="display:none; position:absolute; background-color:white; border:1px solid black; padding:10px;">
        <ul>
            <li>Refresh</li>
            <li>Save Page</li>
            <li>Search</li>
        </ul>
    </div>
</div>
<script>
    document.addEventListener('contextmenu', function(event) {
        event.preventDefault();
        let menu = document.getElementById('contextMenu');
        menu.style.display = 'block';
        menu.style.left = `${event.clientX}px`;
        menu.style.top = `${event.clientY}px`;
    });

    document.addEventListener('click', function(event) {
        const menu = document.getElementById('contextMenu');
        if (!menu.contains(event.target)) {
            menu.style.display = 'none';
        }
    });
</script>

Questo codice JavaScript fa due cose principali:

1. Quando fai clic destro:
   • Impedisce che appaia il normale menu del clic destro (event.preventDefault()).
   • Mostra un menu personalizzato nel punto in cui hai fatto clic destro, posizionato con event.clientX/event.clientY.
2. Quando fai clic ovunque:
   • Nasconde il menu personalizzato in modo che non rimanga sullo schermo.

Creare grafica interattiva con HTML Canvas

Questa applicazione di disegno interattiva consente agli utenti di disegnare su una canvas usando il mouse. L'evento mousemove traccia il movimento del mouse per disegnare linee, ideale per semplici applicazioni grafiche o giochi.

Esempio: Semplice applicazione di disegno

<div>
<p>Start drawing in the box below and see the result!</p>
</div>
<div>
  <canvas id="drawingCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>
</div>
<script>
  const canvas = document.getElementById('drawingCanvas');
  const ctx = canvas.getContext('2d');
  let drawing = false;

  canvas.addEventListener('mousedown', () => {
    drawing = true;
    ctx.beginPath();
  });
  canvas.addEventListener('mouseup', () => drawing = false);
  canvas.addEventListener('mouseout', () => drawing = false);
  canvas.addEventListener('mousemove', function(event) {
    if (drawing) {
      const rect = canvas.getBoundingClientRect();
      ctx.lineTo(event.clientX - rect.left, event.clientY - rect.top);
      ctx.stroke();
    }
  });
</script>

Questo codice configura un'area di disegno su una pagina web utilizzando un elemento <canvas>:

• JavaScript per il disegno:
  • Inizia ottenendo la canvas e il suo contesto di disegno, che viene usato per disegnare.
  • Il disegno inizia quando premi il pulsante del mouse sulla canvas e si interrompe quando lo rilasci o lo muovi fuori dalla canvas.
  • Mentre muovi il mouse sulla canvas tenendo premuto il pulsante, vengono tracciate linee che seguono il cursore del mouse.

Implementare funzionalità di drag-and-drop

Il pattern classico usa tre eventi: mousedown sull'elemento per iniziare il trascinamento, mousemove sul documento per seguire il puntatore (ascoltare sul documento anziché sull'elemento significa che il trascinamento continua a funzionare anche se il puntatore si muove più velocemente del box), e mouseup per fermarsi.

<div>
<div id="draggable" style="width: 100px; height: 100px; background: blue; position: absolute; color: white; padding: 10px">    Drag me!
  </div>
</div>
<script>
  const draggable = document.getElementById('draggable');
  let active = false;
  let currentX;
  let currentY;
  let initialX;
  let initialY;

  draggable.addEventListener('mousedown', function(event) {
    active = true;
    const rect = draggable.getBoundingClientRect();
    initialX = event.clientX - rect.left;
    initialY = event.clientY - rect.top;
  });

  document.addEventListener('mouseup', function() {
    active = false;
  });

  document.addEventListener('mousemove', function(event) {
    if (active) {
      currentX = event.clientX - initialX;
      currentY = event.clientY - initialY;
      draggable.style.left = currentX + 'px';
      draggable.style.top = currentY + 'px';
    }
  });
</script>

Questo codice crea un semplice quadrato blu trascinabile su una pagina web:

• JavaScript per il trascinamento:
  • Il quadrato può essere spostato cliccando e tenendo premuto il mouse su di esso. Quando premi il mouse (mousedown), registra il punto in cui hai afferrato l'elemento e prepara il quadrato a muoversi.
  • Quando rilasci il mouse (mouseup), il quadrato smette di muoversi.
  • Tenendo premuto il mouse, se lo muovi (mousemove), il quadrato segue il puntatore sullo schermo, spostandosi ovunque tu lo trascini.

Migliorare l'usabilità dei moduli

Migliorare l'usabilità dei moduli fornendo elementi interattivi come icone di aiuto può migliorare notevolmente l'esperienza utente. Questo esempio mostra un modo semplice ed efficace per aggiungere testo di aiuto dinamico ai campi del modulo.

<div>
  <p style="font-weight: bold;">Hover your mouse on the icon!</p>
    <label for="password">Password:</label>
    <input type="password" id="password" />
    <span id="helpIcon" style="cursor: help;">&#9432;</span>
    <div id="helpText" style="display:none; margin-top: 10px;">Use 8 or more characters with a mix of letters, numbers & symbols.</div>
</div>
<script>
    document.getElementById('helpIcon').addEventListener('mouseover', function() {
        document.getElementById('helpText').style.display = 'block';
    });

    document.getElementById('helpIcon').addEventListener('mouseout', function() {
        document.getElementById('helpText').style.display = 'none';
    });
</script>

Questo codice fornisce una funzionalità di aiuto per un campo di input della password su una pagina web:

• Campo password e icona di aiuto: C'è un'etichetta, un input per la password e un'icona di aiuto accanto al campo.
• JavaScript per mostrare il testo di aiuto:
  • Quando sposti il mouse sull'icona (mouseover), appare un messaggio nascosto appena sotto con consigli per creare una password sicura.
  • Quando allontani il mouse dall'icona (mouseout), il messaggio scompare.

Nota sull'accessibilità

Gli eventi del mouse si attivano solo per gli utenti che usano un puntatore. Gli utenti da tastiera, gli utenti di screen reader e i dispositivi touch non attiveranno mouseover, mousemove o i gestori del clic destro. Per qualsiasi cosa importante, abbina i gestori del mouse alle loro controparti accessibili:

• Aggiungi listener focus/blur insieme a mouseenter/mouseleave in modo che l'effetto funzioni anche quando si naviga con il tasto Tab all'elemento.
• Aggiungi keydown (Invio/Spazio) insieme a click per widget personalizzati che non sono pulsanti nativi.
• Non nascondere mai contenuti essenziali solo dietro l'hover.

Consulta Considerazioni sull'accessibilità del DOM per il quadro completo.

Conclusione

Gli eventi del mouse di JavaScript offrono un solido set di strumenti per creare esperienze web interattive — da un semplice click a menu contestuali personalizzati, disegno su canvas e drag-and-drop. Le chiavi per usarli bene sono: scegliere l'evento giusto (mouseenter vs mouseover), leggere la coordinata corretta (clientX vs pageX vs offsetX) dall'oggetto evento, mantenere i gestori mousemove leggeri, e fornire sempre un'alternativa accessibile da tastiera. Con queste abitudini, gli eventi del mouse diventano una base affidabile per interfacce coinvolgenti.

Esercitazione