Corsi on-line

Rendere un div clickabile con JavaScript

Una soluzione per rendere un div interamente clickabile potrebbe essere quella di inserire il markup di quest’ultimo all’interno dell’apertura e della chiusura del tag “a” per i link, una procedura del genere non sarebbe però corretta a livello sintattico e, in caso di validazione, si otterrebbe una notifica di errore “document type does not allow element “div” here“.

DivBox

Ciò accade per via del fatto che tale elemento viene inserito in un contesto nel quale il suo posizionamento diventa irregolare, un div è infatti una componente block level del markup (come per esempio accade per “p” o “table”) mentre “a” (come “span”) è un elemento inline; per un’intuibile motivazione di carattere strutturale, una componente block level può contenere un elemento inline (un link può essere inserito in una divbox), ma non può accadere il contrario.

Detto questo, rimane il problema di poter rendere un div clickabile senza per questo doverlo “linkare”; JavaScript consente di estendere l’evento correlato al click su un collegamento ad un intero contenitore, si consideri ad esempio un divbox come il seguente:

<div class="divBox">
Un po' di testo.
<a href="http://blog.mrwebmaster.it">Il blog di MrWebmaster</a>
</div>

La chiave del funzionamento di questo div sarà la classe “divBox”, essa infatti dovrà fare riferimento alla seguente funzione JS:

$(".divBox").click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
});

E’ naturalmente da sottolineare che, dato che lo script ricerca il tag “a” e l’attributo “href”, il div dovrà obbligatoriamente contenere un link.

Post correlati
I più letti del mese
Tematiche