Warum hat dieser Prototyp Code Arbeit wie das?

Question

Das ist mein html:

(Anmerkung: ich kein Hintergrundbild auf dem ein nur der Einfachheit halber jemand zu zeigen, verwendet haben, wie dies funktionieren könnte)

<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>

Und mein 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>

Warum ist das Element, in fooClick das Bild und nicht der Anker? Wie soll ich dies getan hat, um das Bild zu verwenden.

Answer 1

Während die Click-Handler an den Anker gebunden ist, wird das Click-Ereignis auf dem Bild angehoben. Die Veranstaltung sprudelt das DOM und der Event-Handler auf dem Anker nach oben wird aufgerufen. event.element() ist das Element, dass das Ereignis auf

angehoben

Answer 2

Etwas zu Ihrer Frage verwirrt: „Warum ist das Element, in fooClick das Bild und nicht der Anker? Wie soll ich dies getan habe, das Bild zu verwenden.“

Meinen Sie „Anker“ im letzten Satz? Wenn ja, event.element () ist das eigentliche Element, auf das geklickt wurde, nicht unbedingt das Element, das die Prozedur zugewiesen ist. Wenn Sie den Anker benötigen, können Sie nur so etwas wie Alarm tun (event.element (). Nach oben ( 'A')).

Answer 3

Wenn Sie Bilder als Hintergrund verwenden möchten, sollten Sie einen Anker als event.element get (). Ich denke event.element () die gleiche wie event.target ist, und dies ist ein Element, das ein Ereignis empfangenen erste und von dem dieses Ereignis ist sprudelt das DOM. So entfernen (verschieben Sie es in CSS / Hintergrund-Bild) oder überprüfen Sie für das Element () Elternteil.