Pourquoi ce code prototype fonctionne-t-il comme ceci?
-
05-07-2019 - |
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?
La solution
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
Autres conseils
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')).
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 ().