Por que esse código de protótipo funciona como este?

Question

Este é o meu html:

(Nota: eu não usei uma imagem de plano de fundo a A apenas por simplicidade para mostrar a alguém como isso poderia funcionar)

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

Por que o elemento em Foooclick é a imagem e não a âncora? Como devo ter feito isso para usar a imagem.

Answer 1

Enquanto o manipulador de cliques está ligado à âncora, o evento de clique é elevado na imagem. O evento borbulha o DOM e o manipulador de eventos na âncora é chamado. event.element() é o elemento em que o evento foi levantado

Answer 2

Um pouco confuso com a sua pergunta: "Por que o elemento está na imagem e não na âncora? Como devo ter feito isso para usar a imagem".

Você quis dizer "âncora" na última frase? Nesse caso, event.Element () é o elemento real que foi clicado, não necessariamente o elemento que o manipulador atribuído a ele. Se você precisar da âncora, pode fazer algo como alerta (event.Element (). UP ('A')).

Answer 3

Se você usar imagens como plano de fundo, você deve obter uma âncora como event.Element (). Eu acho que event.Element () é o mesmo que o Event.Target e este é um elemento que recebeu um evento primeiro e do qual este evento é borbulhante no DOM. Portanto, remova (mova-o para CSS/imagem de fundo) ou verifique o elemento () pai.