Eventi del mouse

In questo capitolo andremo un po’ più a fondo sugli eventi del mouse e le loro proprietà.

Nota bene: questi eventi potrebbero derivare non solo da “dispositivi mouse”, ma anche da dispositivi di altro tipo, come telefoni e tablets, nei quali sono emulati per compatibilità.

Tipi di eventi del mouse

Abbiamo visto precedentemente alcuni di questi eventi:

mousedown/mouseup

Il pulsante del mouse viene premuto/rilasciato su un elemento.

mouseover/mouseout

Il puntatore del mouse passa sopra/abbandona un elemento.

mousemove

Ogni movimento del mouse su un elemento genera questo evento.

click

Scaturito dopo l’evento mousedown e quindi mouseup sullo stesso elemento se viene usato il pulsante sinistro del mouse.

dblclick

Generato quando avvengono due click sullo stesso elemento in un piccolo intervallo di tempo. Oggigiorno usato raramente.

contextmenu

Scaturito quando viene premuto il pulsante destro del mouse. Ci sono altri modi per aprire un menù contestuale, per esempio usando un particolare tasto della tastiera, quindi viene generato anche in quest’ultimo caso e non è propriamente un evento del mouse.

…Ci sono tanti altri eventi, che affronteremo successivamente.

Ordine degli eventi

Come possiamo notare dalla lista appena descritta, un’azione dell’utente può generare eventi multipli.

Per esempio, un click sul pulsante sinistro del mouse genera mousedown, quando il pulsante viene premuto, quindi mouseup e click quando viene rilasciato.

Quando un’azione singola inizia eventi multipli, il loro ordine è fisso. Ossia, i gestori vengono chiamati nell’ordine mousedown → mouseup → click.

Premi il seguente pulsante e vedrai gli eventi. prova anche il doppio click.

Nel banco di prova in basso, vengono elencati tutti gli eventi del mouse, e se passa più di un secondo tra uno e l’altro vengono separati da una riga orizzontale.

Possiamo inoltre notare la proprietà button che permette di rilevare il pulsante del mouse, viene spiegato successivamente.

Pulsante del mouse

Gli eventi relativi al click contengono sempre la proprietà button, che permette di conoscere esattamente quale pulsante del mouse viene premuto.

Solitamente non lo usiamo per gli eventi click e contextmenu, perché il primo avviene solo per il click sul pulsante sinistro, ed il secondo – solo per quelli sul tasto destro.

D’altra parte, i gestori mousedown e mouseup potrebbero necessitare di event.button, in quanto questi eventi vengono generati su qualunque pulsante, quindi button permette di discriminare tra “mousedown destro” e “mousedown sinistro”.

I valori possibili di event.button sono:

La maggioranza dei mouse hanno solo il tasto destro e sinistro, quindi i valori possibili sono 0 o 2. Anche i dispositivi touch generano event simili al tocco.

Inoltre esiste la proprietà event.buttons che include tutti i pulsanti attualmente premuti, rappresentati come numero intero, una cifra per pulsante. In pratica questa proprietà viene usata raramente, ma si possono trovare i dettagli su MDN in caso di necessità.

Modificatori: shift, alt, ctrl e meta

Tutti gli eventi del mouse includono informazioni circa i tasti modificatori premuti.

Proprietà dell’evento:

• shiftKey: Shift
• altKey: Alt (oppure Opt per Mac)
• ctrlKey: Ctrl
• metaKey: Cmd per Mac

Vengono valorizzati a true quando il tasto corrispondente viene premuto.

Per esempio, il seguente pulsante funziona solamente con Alt+Shift+click:

<button id="button">Alt+Shift+Click qui!</button>

<script>
  button.onclick = function(event) {
    if (event.altKey && event.shiftKey) {
      alert('Urrà!');
    }
  };
</script>

Coordinate: clientX/Y, pageX/Y

Tutti gli eventi del mouse forniscono le coordinate in due modi:

1. Relative alla Window: clientX e clientY.
2. Relative al Document: pageX e pageY.

Abbiamo già affrontato la differenza tra le due nel capitolo Coordinate.

In soldoni, le coordinate relative al documento pageX/Y vengono misurate a partire dall’angolo in alto a sinistra del documento, e non cambiano se la pagina viene scrollata, mentre invece clientX/Y vengono misurate a partire dall’angolo in alto a sinistra della finestra. Quando la pagina viene scrollata, i loro valori cambiano.

Per esempio, se avessimo una finestra di dimensioni 500x500, ed il puntatore del mouse fosse nell’angolo in alto a destra, allora clientX e clientY sarebbero valorizzate a 0, senza alcuna considerazione del fatto che la pagina sia scrollata o meno.

E se il puntatore fosse al centro, allora clientX e clientY sarebbero valorizzati a 250, senza tenere conto del punto in cui si trovi rispetto al documento. In qualche modo sono simili a position:fixed da questo punto di vista.

Muovere il mouse sopra il campo di testo per vedere clientX/clientY (l’esempio è dentro un iframe, quindi le coordinate sono relative a questo iframe):

<input onmousemove="this.value=event.clientX+':'+event.clientY" value="Muovi il mouse sopra me">

Prevenire la selezione su mousedown

Il doppio click del mouse ha un effetto collaterale che potrebbe dare fastidio in alcune interfacce: seleziona il testo.

Per esempio, il doppio click sul seguente testo lo seleziona in aggiunta al nostro gestore:

<span ondblclick="alert('dblclick')">Doppio click su di me</span>

Se si preme sul pulsante sinistro del mouse e, senza rilasciarlo, si muove il mouse, si ottiene una selezione, spesso non voluta.

Ci sono vari modi per prevenire la selezione, consultabili nel capitolo Selection e Range.

In questo caso particolare la maniera più ragionevole è di prevenire l’azione del browser su mousedown. La cosa previene entrambe queste selezioni:

Prima...
<b ondblclick="alert('Click!')" onmousedown="return false">
  Double-click me
</b>
...Dopo

Adesso l’elemento in grassetto non viene selezionato al doppio click, e premendo il pulsante sinistro su di esso non comincerà la selezione.

Nota bene: il testo all’interno è ancora selezionabile. Comunque, la selezione dovrebbe cominciare non sul testo stesso, ma prima o dopo di esso. Solitamente la cosa è accettabile per gli utenti.

<div oncopy="alert('Copying forbidden!');return false">
  Caro utente,
  La copia è vietata.
  Sebbene, nel caso in cui tu conosca JS or HTML, allora potrai prendere tutto dal sorgente della pagina.
</div>

Riepilogo

Gli eventi del mouse contengono le seguenti proprietà:

• Pulsante: button.

• Tasti modificatori (true se premuto): altKey, ctrlKey, shiftKey e metaKey (Mac).

  • Se vogliamo gestire Ctrl, allora non dobbiamo dimenticarci degli utenti Mac, che solitamente usano Cmd, quindi sarebbe meglio controllare if (e.metaKey || e.ctrlKey).

• Coordinate relative alla Window: clientX/clientY.

• Coordinate relative al Document: pageX/pageY.

L’azione predefinita del browser di mousedown è la selezione del testo, se non è cosa gradita per l’interfaccia, allora dovrebbe essere prevenuta.

Nel prossimo capitolo vedremo più in dettaglio gli eventi che seguono i movimenti del puntatore e come tenere traccia degli elementi che cambiano sotto di esso.