La proprietà cancelBubble e l'oggetto event

Questo esempio mostra come utilizzare la proprietà cancelBubble dell'oggetto event relativamente alle specifiche di Internet Explorer (dalla versione 4 in poi). Un'interessante caratteristica della gestione degli eventi in JavaScript è che tali eventi si propagano attraverso la gerarchia degli elementi che li catturano.

Nel codice sottostante, un elemento <DIV> che contiene un elemento <IMG>:

si può notare che:

1. sia green_rect che evt_img hanno un gestore onclick;
2. Il gestore punta alla stessa funzione identificaSrc();

Qui si vuole dimostrare che, se si clicca sull'immagine, l'evento viene raccolto 2 volte: la prima dall'immagine, la seconda dal blocco DIV.

Il codice usato è:

 

var evtcnt=0; function resetEvtcnt(){evtcnt=0;} function identificaSrc(){      // ottengo l'oggetto sorgente dell'evento e il suo tag identificativo      tn=event.srcElement.tagName;      if(tn == "DIV")evtcnt=0;      // stampo sull'alert il numero di volte in cui      // l'evento è stato identificato e il tag dell'elemento più interno che lo ha intercattato      alert(++evtcnt + ' - evento identificato: ' + event.type + "\nla sorgente è un elemento: " + tn); }

Si possono verificare situazioni nelle quali non si vuole che l'evento si propaghi rispetto alla gerarchia degli oggetti nell'esempio.

In questo caso vorrò ad esempio che sia mostrato un solo alert.

Potrò scrivere allora:

function identificaSrc2(){      // questa funzione sarà eseguita una sola volta!!!      tn=event.srcElement.tagName;      if(tn == "DIV")evtcnt=0;      // stampo sull'alert il numero di volte in cui      // l'evento è stato identificato e il tag dell'elemento più interno che     // lo ha intercettato      alert(++evtcnt + ' - evento identificato: ' + event.type + "\nla sorgente è un elemento: " + tn);      // cancello l'evento per ogni altro elemento della gerarchia      event.cancelBubble=true; }

Chiudi la finestra| Home