Perché questo codice prototipo funziona in questo modo?

Question

Questo è il mio html:

(nota: non ho usato un'immagine di sfondo su a solo per semplicità per mostrare a qualcuno come potrebbe funzionare)

<div class="foo">
    <ul>
        <li><a href="#" class="bar"><img src="bar.gif" /></a></li>
        <li><a href="#" class="baz"><img src="baz.gif" /></a></li>
    </ul>
</div>

E il mio JavaScript:

<script type="text/javascript">
    Event.observe(window, 'load', function() {
        $('.foo a').each(function(a) {
            alert(a); // this is the anchor
            a.observe('click', fooClick);
    });

    function fooClick(event) {
        alert(event.element()); // this is the img
    }
</script>

Perché l'elemento in fooClick l'immagine e non l'ancora? Come avrei dovuto farlo per usare l'immagine.

Answer 1

Mentre il gestore di clic è associato all'ancoraggio, l'evento di clic viene generato sull'immagine. L'evento crea bolle nel DOM e viene chiamato il gestore eventi sull'ancora. event.element () è l'elemento che ha generato l'evento il

Answer 2

Un po 'confuso alla tua domanda, " Perché l'elemento in fooClick l'immagine e non l'ancora? Come avrei dovuto farlo per usare l'immagine. & Quot;

Intendevi " anchor " nell'ultima frase? In tal caso, event.element () è l'elemento effettivo a cui è stato fatto clic, non necessariamente l'elemento a cui è stato assegnato il gestore. Se hai bisogno dell'ancora puoi semplicemente fare qualcosa come alert (event.element (). Up ('A')).

Answer 3

Se utilizzerai le immagini come sfondo, dovresti ottenere un'ancora come event.element (). Penso che event.element () sia uguale a event.target e questo è un elemento che ha ricevuto per primo un evento e dal quale questo evento fa scoppiare il DOM. Quindi rimuovi (spostalo in css / background-image) o controlla l'elemento () parent.