Pourquoi ce code prototype fonctionne-t-il comme ceci?

Question

Voici mon code HTML:

(note: je n’ai pas utilisé d’image d’arrière-plan simplement pour montrer à quelqu'un comment cela pourrait fonctionner)

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

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

Pourquoi l'élément dans fooClick est-il l'image et non l'ancre? Comment aurais-je dû faire cela pour utiliser l'image?

Answer 1

Alors que le gestionnaire de clics est lié à l'ancre, l'événement de clic est déclenché sur l'image. L'événement bouillonne dans le DOM et le gestionnaire d'événements sur l'ancre est appelé. event.element () est l'élément qui a déclenché l'événement. sur

Answer 2

Quelque peu confus à votre question "Pourquoi l'élément dans fooClick est-il l'image et pas l'ancre? Comment aurais-je dû faire cela pour utiliser l'image? & Quot;

Voulez-vous dire "ancre"? dans la dernière phrase? Si tel est le cas, event.element () est l'élément réel sur lequel l'utilisateur a cliqué, pas nécessairement l'élément auquel le gestionnaire a été attribué. Si vous avez besoin de l'ancre, vous pouvez simplement faire quelque chose comme alert (event.element (). Up ('A')).

Answer 3

Si vous souhaitez utiliser des images comme arrière-plan, vous devez obtenir une ancre sous la forme event.element (). Je pense que event.element () est identique à event.target et qu’il s’agit d’un élément qui a reçu un événement en premier et à partir duquel cet événement est affiché dans le DOM. Donc, supprimez (déplacez-le vers css / background-image) ou recherchez élément parent ().