Intercettare l’elemento sotto il mouse

Sono passati parecchi mesi da quando avevo iniziato a scrivere due righe sulla faccenda del Drag and Drop con Javascript.

Oggi forse riusciamo a portarne a casa un altro pezzo …

Eccomi dunque qui per sperimentare con qualche riga di codice come capire quale elemento HTML si trova sotto il nostro mouse.

Il comando che lancia la funzione principale è richiamato dall’evento onmouseover dell’oggeto document:

CheckElement verrà quindi lanciata ogni volta che ci sposteremo da un elemento all’altro, indicandoci il tipo di elemeto ( IMG , DIV , ecc .. ) , il suo id e la sua classe css

<br /> 01. function CheckElement(e) {<br /> 02. // compatibilità crossbrowser<br /> 03. if (!e) var e = window.event;<br /> 04. var oElement = (e.target) ? e.target : e.srcElement<br /> 05. var oLog = document.getElementById(‘log’)<br /> 06. if ( oElement.tagName != ‘HTML’ && oElement.tagName != ‘BODY’ ) {<br /> 07. oLog.innerHTML = ‘| Tipo: ‘ + oElement.tagName<br /> 08. oLog.innerHTML += ‘| Class: ‘ + oElement.className<br /> 09. oLog.innerHTML += ‘| ID: ‘ + oElement.id<br /> 10. } else {<br /> 11. oLog.innerHTML = ‘| ‘<br /> 12. }<br /> 13. return false;<br /> 14. }

Per un rudimentale esempio potete dare una sbirciata a questa pagina.

• La riga 3 gestisce la compatibilità crossbrowser. ( vedi qui )
• La riga 4 è il cuore dalla funzione in quando è lei che sempre con una modalità crossbrowser intercetta e referenzia l’elemento sotto il mouse assegnadolo alla variabile oElement.
• La riga 5 referenzia l’elemento “log”, quello dove andremo a scrivere le informazioni del’elemento oElement.
• Con la riga 6 verifico che l’elemento sotto il mouse non sia ne l’elemento HTML ne BODY in quanto questi due elementi rappresentano la pagina nella sua totalità , quindi trovarsi su di essi vuol dire non trovarsi sopra nulla.
• Con le righe 7 , 8 e 9 “inietto” dentro l’elemento oLog tramite la sua sua proprietà innerHTML alcune informazioni relative all’elemento oElement.

Questo tipo di informazioni ci può tornare utile per gestire comportamenti differenti basandosi sul tipo di elemento e risulta a questo punto molto semplice creare delle funzioni che intervengano al rispettarsi di alcune condizioni come il tipo, il nome o la classe dell’elemento sottostante.