torna alle lezioni

Catturare i links nell'elemento

importanza: 5

Fate in modo che tutti i links dentro l’elemento con id="contents" chiedano all’utente se vuole davvero abbandonare la pagina al click. Se risponde no, allora non deve seguire il link.

Come nell’esempio seguente:

Dettagli:

  • L’HTML dentro l’elemento potrebbe essere caricato o rigenerato in qualunque istante, quindi non possiamo trovare tutti i links ed inserirvi dei gestori all’interno. Utilizzare invece la event delegation.
  • Il contenuto può contenere tags annidati. Anche dentro i links, per esempio potremmo avere <a href=".."><i>...</i></a>.

Apri una sandbox per l'esercizio.

Questo è un ottimo uso del pattern event delegation.

In applicazioni concrete, invece di chiedere, potremmo inviare una richiesta di “logging” al server, che salvi l’informazione relativa al momento in cui l’utente ha deciso di abbandonare la pagina. Oppure potremmo caricare il contenuto e mostrarlo direttamente in pagina (se permesso).

Tutto ciò di cui abbiamo bisogno è di catturare i contents.onclick ed usare confirm per chiedere all’utente. Una buona idea potrebbe essere quella di usare link.getAttribute('href') invece di link.href per l’URL. Guarda la soluzione per i dettagli.

Apri la soluzione in una sandbox.