¿Por qué este código de Prototipo funciona así?

Question

Este es mi html:

(nota: no usé una imagen de fondo en la a por simplicidad para mostrar a alguien cómo podría funcionar esto)

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

Y mi 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 qué el elemento está en fooHaga clic en la imagen y no en el ancla? Cómo debería haber hecho esto para usar la imagen.

Answer 1

Mientras que el controlador de clic está vinculado al ancla, el evento click se levanta en la imagen. El evento genera el DOM y se llama al controlador de eventos en el ancla. event.element () es el elemento que provocó el evento en

Answer 2

Algo confundido con su pregunta, " ¿Por qué el elemento está en fooHaga clic en la imagen y no en el ancla? ¿Cómo debería haber hecho esto para usar la imagen? & Quot;

¿Quisiste decir " ancla " en la ultima frase? Si es así, event.element () es el elemento real en el que se hizo clic, no necesariamente el elemento que tiene asignado el controlador. Si necesita el ancla, puede hacer algo como alert (event.element (). Up ('A')).

Answer 3

Si utilizará imágenes como fondo, debería obtener un ancla como event.element (). Creo que event.element () es igual que event.target y este es un elemento que recibió un evento primero y desde el cual este evento es una burbuja del DOM. Así que elimínelo (muévalo a css / background-image) o busque element () parent.