Javascript - onMouseDownLong - Jiki Comunicazione e Marketing - Agenzia Creativa di Comunicazione e Pubblicità, Pubblicità Creativa e Realizzazione siti web, Progetti di Marketing e Guerrilla Marketing a Rovigo, Padova, Ferrara e Verona

Javascript - onMouseDownLong

Il primo Jiki-articolo a contenuto strettamente pratico.

A tutti noi piace essere creativi ed innovativi, alla ricerca di quel particolare bello ed utile che possa distinguersi.
Ma nel web la creatività ha senz'altro bisogno di un aiuto dall'ingegno.
Ed é per questo che noi di Jiki siamo felici di mettervi a disposizione qualche spunto, idea o novità che ci sembra essere utile a chi lavora al nostro stesso modo.
Per iniziare ho deciso di partire da un piccolo spunto di programmazione in javascript, di difficoltà media.

onMouseDownLong

Nelle animazioni e negli strumenti javascript tutto avviene ad eventi; esso racchiude una serie base di eventi che vengono richiamati in varie occasioni: ai caricamenti, all'uso del mouse e della tastiera, ecc...
Nell'ottica dell'usabilità e dello studio delle interfaccie mi sono sempre chiesto come si potessero creare degli eventi, e perciò anche delle interazioni, potenti ma allo stesso tempo semplici da capire ed usare.

"onMouseDownLong" é un tipo di evento ideato per implementare una doppia funzionalità al click del mouse.
Tenedo premuto il pulsante del mouse per un tempo determinato avviene un evento, mentre se si rilascia il mouse prima ne avviene un'altro.
Questo permette ad esempio di creare dei bottoni di conferma o per evitare i click accidentali.

Come fare?

La function "setOnMouseDownLong" va ad impostare un evento speciale, il quale sfrutta due eventi base:

"onmousedown" impostato all'elemento protagonista;
"onmouseup" impostato invece all'intero documento.

Il primo evento imposta, tramite "setTimeout", una funzione a lungo termine ed una variabile di controllo "ok" al valore "false" per indicare che il bottone del mouse é stato premuto ma la funzione non ancora richiamata.
Il secondo evento imposta una controllo che, quando richiamato al rilascio del mouse in qualsiasi punto del documento, andrà a verificare se la prima funzione a lungo termine é già stata eseguita (valore della variabile "ok" impostato a "true") e nel caso contrario andrà ad eseguire una seconda funzione alternativa.

Il codice

Qui di seguito trovate il codice di esempio utilizzato più in basso per la demo.

Il codice javascript:

	
	function setOnMouseDownLong(element, func_long, func_short, delay) {
		var timeout, ok = true;
		element.onmousedown = function() {
			ok = false;
			timeout = setTimeout(function(){
				ok = true;
				func_long.call(element);
			}, delay);
		};
		document.onmouseup = function() {
			clearTimeout(timeout);
			if(!ok)
				func_short.call(element);
			ok = true;
		}
	}
	
	var element = document.getElementById('test_omdl');
	
	setOnMouseDownLong(element, function() {
		alert('Sono passati 2 secondi!');
	}, function() {
		alert('Troppo presto!');
	}, 2000);

Il codice HTML:

	
	<p>
		<img src="/articoli/logo-jiki.jpg" alt="Logo Jiki" id="test_omdl" />
	</p>

Demo

Clikkate sopra il logo Jiki e tenete premuto per almeno 2 secondi per richiamare l'evento principale, oppure rilasciate il pulsante del mouse prima per richiamare l'azione secondaria.