0

Есть такая няшка.

Событие срабатывает для <IMG>, но не для <A>.

Вопрос:
1. Почему, ведь event bubbling в теории должен посылать событие вверх по дереву?
2. И как сделать чтобы оно (событие!) всплывало?


UPDATE

Почитал http://www.quirksmode.org/js/events_order.html
Там хорошо расписан алгоритм работы event bubbling (и capturing). Из этого ясно что событие будет срабатывать только для тех элементов, к которым привязан обработчик, а к элементу <A> ничего не привязано.

Вопрос тогда в следующем:

Как на чистом js реализовать

$(document).on('mouseover', 'a', function(e) { /* и это работет! */ })

Интересует "хорошее" (no overhead) решение, а не "главное, что работает"...

0

1 ответ 1

2

Событие возникает, когда вы наводите указатель мыши на элемент, далее оно начинает подниматься и обрабатывается уже в элементе document. У Вас есть элемент, с которого все началось (event.target) и элемент, который в данный момент обрабатывает событие (event.currentTarget он же document) во время всплытия.

Проблема в том, что вы не можете навести указатель мыши на элемент <a>, поскольку он невидимый и на странице никак не отображается. Достаточно добавить хотя бы рамку и все станет на место. Элемент становится видимым и отображаемым на странице и событие получит ход.

Update

@disfated, вы по моему сами путаетесь, что и откуда у Вас в коде возникает и потому не понимаете, что я Вам написал. Событие mouseover возникает когда Вы наводите мышь на элемент и далее оно всплывает по всем элементам.

Где у Вас стоит обработчик в коде? Он у Вас стоит на элементе document исходя из этой строки: document.addEventListener( .... Событие возникло и всплыло по всем элементам до document, который его и обработал. Можно это узнать через event.currentTarget(выведет тот самый #document). Именно он это событие поймал и именно для него Вы указали функцию обработчик.

Кто был инициатором события? Элемент, над которым вы провели мышкой. Вы проводите мышкой над элементом img, оно всплывает к document, вот он Вам его и показывает. Несмотря на то, что всплытие события прошло через ваш <a>, его инициировал именно img(тот самый event.target). А вот инициировать его через <a> у Вас не выйдет, так как он не видимый и указателем мышки вы над ним провести не сможете. И обработчика в нем у Вас не стоит, который бы его перехватил на всплытии, он у Вас только на document выше повешен.

И не путайте визуальную видимость для глаза и видимость для дерева отображения DOM, это разные вещи. Вложенные элементы как раз таки видны дереву.

Update 2

Если только ссылки, то возможно вас устроит такой вариант:

for(i=0; i < document.links.length; i++) {
    document.links[i].addEventListener('mouseover', function(e) { ... }, false);
}
1
  • Первая часть довольно расплавчата, вторая в корне не верна, т.к. event bubbling не имеет отношения к видимости элементов. Если вы 20 элементов вложите друг в друга, при этом они все будут не видимы из-за друг друга, но повесите на них (а не на document) обработчики, то событие на IMG будет всплывать в каждом.
    – disfated
    Commented 4 мая 2015 в 14:45

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.