Почему этот код прототипа работает так?

StackOverflow https://stackoverflow.com/questions/1800061

  •  05-07-2019
  •  | 
  •  

Вопрос

Это мой HTML:

(примечание: я не использовал фоновое изображение на a просто для простоты, чтобы показать кому-то, как это может работать) 

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

И мой 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>

Почему элемент в fooClick изображение, а не якорь? Как я должен был сделать это, чтобы использовать изображение.

Это было полезно?

Решение

Пока обработчик щелчка привязан к привязке, на изображении возникает событие щелчка. Событие всплывает в DOM, и вызывается обработчик события на привязке. event.element () - это элемент, в котором было инициировано событие на

Другие советы

Несколько запутался в вашем вопросе " Почему элемент в fooClick изображение, а не якорь? Как я должен был сделать это, чтобы использовать изображение. & Quot;

Вы имели в виду " якорь " в последнем предложении? Если это так, event.element () - это фактический элемент, по которому щелкнули, а не обязательно тот элемент, для которого назначен обработчик. Если вам нужен якорь, вы можете просто сделать что-то вроде alert (event.element (). Up ('A')).

Если вы будете использовать изображения в качестве фона, вы должны получить привязку как event.element (). Я думаю, что event.element () - это то же самое, что и event.target, и это элемент, который первым получил событие и от которого это событие всплывает в DOM. Поэтому удалите (переместите его в css / background-image) или проверьте элемент () parent.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top