Eventi del mouse

Riportiamo la selezione di eventi che si verificano quando l’utente interagisce con il mouse, il trackpad, o il touchscreen (uso limitato)

click	L’utente preme e poi rilascia un tasto del mouse su un elemento
dblclick	L’utente effettua una doppio-click su un elemento
mousedown	L’utente preme un tasto del mouse su un elemento
mouseup	L’utente rilascia un tasto del mouse su un elemento
mousemove	L’utente sposta il mouse (no-touchscreen)
mouseover	L’utente sposta il mouse su un elemento (no-touchscreen)
mouseout	L’utente sposta il mouse da un elemento (no-touchscreen)

Proprietà aggiuntive dell'oggetto "Event"

Tra gli eventi utilizzati nello sviluppo di un'interfaccia Web ci sono alcuni eventi che necessitano di maggiori specifiche sulle possibilità di utilizzo dell'oggetto "event".

L'oggetto "event" oltre alle proprietà standard di cui abbiamo già parlato ha ulteriori proprietà richiamabili a secondo dell'evento utilizzato.
Tratteremo tutte le proprietà dell'oggetto event relative agli eventi del mouse.

Le raggruppiamo qui sotto per poi mostrare con quali eventi sono utilizzabili.

Note: in altre documentazioni potremmo sentire parlare dell'oggetto "MouseEvent" esso fa sempre riferimento all'oggetto "Event".

Proprietà	Descrizione
event.target	restituisce il target dell'evento; ovvero l'elemento che subisce l'interazione.
event.type	restituisce il tipo di evento lanciato.
event.cancelable	annulla il comportamento standard dell'elemento.
event.button	indica quale pulsante è stato premuto sul mouse per attivare l'evento
event.buttonbutton	indica quali pulsanti sono stati premuti contemporaneamente sul mouse per attivare l'evento
event.clientY event.clientX	fornisce la coordinata verticale/orizzontale all'interno del viewport dell'applicazione in cui si è verificato l'evento mousemove
event.pageY event.pageX	fornisce la coordinata verticale/orizzontale all'interno del documento dell'applicazione in cui si è verificato l'evento mousemove
event.relatedTarget	Mentre la proprietà target individua l'oggetto destinatario dell'evento, relatedTarget individua l'oggetto da cui proviene o verso cui va il cursore del mouse nel suo spostamento

Eventi del mouse

Passaggio del mouse su elemento

Negli eventi mouseover e mouseout vi è la possibilità di utilizzare in maniera avanzata le proprietà dell'oggetto event ed in particolare della sua proprietà .target

Evento	Proprietà
mouseover mouseout	event.taget.className

element.addEventListener('mouseover', function(event){
event.taget.className = "evidenziaBordo";
});
element.addEventListener('mouseout', function(event){
event.taget.className = "bordoSemplice";
});

Attraverso la proprietà .className abbiamo effettuato un cambio-classe, per un cambio-stile, all'elemento oggetto dell'evento, event.target, in corrispondenza del passaggio del mouse sia in entrata sia in uscita.

Pressione dei pulsanti del mouse

 Nell'evento mousedown possiamo individuare quale pulsante è stato premuto sfruttando la proprietà button dell'oggetto event.

Evento	Proprietà
mousedown	event.button event.buttonbutton

element.addEventListener('mousedown', function(event){
console.log(event.button);
});

Il valore restituito è un valore numerico che sta ad indicare il tasto premuto

Valore	Descrizione
0	Pulsante sinistro
1	Pulsante centrale
2	Pulsante destro

element.addEventListener('mousedown', function(event){
switch(event.button){
		case 0:
			console.log("Hai cliccato con il pulsante sinistro");
			break;
		case 1:
			console.log("Hai cliccato con il pulsante centrale");
			break;
		case 2:
			console.log("Hai cliccato con il pulsante destro");
			break;
	}
});

Per la pressione contemporanea di più tasti del mouse utilizzeremo la proprietà event.buttonbutton

element.addEventListener('mousedown', function(event){
console.log(event.buttonbutton);
});

Valore	Rapp. binaria	Descrizione
1	001	Pulsante sinistro
2	010	Pulsante centrale
4	100	Pulsante destro

Il valore complessivo restituito è la somma dei singoli valori
es.
Pressione contemporanea di tasto destro(4)+sinistro(1) otterremo 5
Pressione contemporanea di tasto sinistro(1)+centrale(2) otterremo 3
ecc.

Posizione del mouse

Possiamo ottenere le posizioni del cursore attraverso proprietà aggintive dell'oggetto event.
Queste proprietà sono disponibili in relazione all'utilizzo dell'evento mousemove

Evento	Proprietà
mousemove	event.pageY event.pageX event.clientY event.clientX

element.addEventListener('mousemove', function(event){
console.log('Posizione verticale rispetto al documento: ' + event.pageY + 'px');
console.log('Posizione orizzontale rispetto al documento: ' + event.pageX + 'px');
console.log('Posizione verticale rispetto alla viewport: ' + event.clientY + 'px');
console.log('Posizione orizzontale rispetto alla viewport: ' + event.clientX + 'px');
});

Spostamento da un elemento all'altro

Evento	Proprietà
mouseover mouseout mouseenter mouseleave	event.target event.relatedTarget

Un'altra proprietà che riguarda la posizione del mouse e gli eventi mouseover, mouseout, mouseenter e mouseleave è event.relatedTarget.
La prorpietà individua l'oggetto da cui proviene o verso cui va il cursore del mouse nel suo spostamento.

Blocco HTML

<div class="conteniner">
<div id="boxRosso" class="box"></div><div id="boxBlue" class="box"></div>
</div>

<style>
.box{height: 100px; width: 100px;}
#box1{background: red;}
#box2{background: blue;}
.conteniner{display:flex;}
</style>

var boxRosso = document.getElementById('boxRosso');
var boxBlue = document.getElementById('boxBlue');
var notifica = document.getElementById('messaggio');

boxRosso.addEventListener('mouseleave', function(event){
console.log('Il mouse si è spostato dal ' + event.target.id + ' al ' + event.relatedTarget.id);
});
boxBlue.addEventListener('mouseleave', function(event){
console.log('Il mouse si è spostato dal ' + event.target.id + ' al ' + event.relatedTarget.id);
});

L'Evento "contextmenu"

L'evento "contextmenu" consente di associare un menu differente rispetto al menu standard disponibile di default quando l'utente clicca con il tasto-destro del mouse sul documento in-genere o su un elemento.

Creazione menu alternativo

<div class="menuTastoDestro" style="z-index:10; background:#1180a6; display: flex; justify-content: center; flex-direction: column; padding: 5%; border-radius:5px;">
<h1 style="font-size:30px; color:white;">Ciao, sono Lucio Asciolla e sono un Front-End Web Developer.</h1> 
<p style="font-size:20px; color:white;">Se hai necessità di supporto utilizza i tasti in basso a destra per contattarmi</p>
</div>

window.oncontextmenu = function(event) { 
	var menuAlternativo = document.querySelector("div.menuTastoDestro");
	menuAlternativo.style.position = "absolute";
	menuAlternativo.style.left = event.pageX + "px";
	menuAlternativo.style.top = event.pageY + "px";
	event.preventDefault();
};