Как определить, что клик был по элементу?

Question

[Анатолий]

Существует 2 независимые функции, которые слушают событие click:
1) document.addEventListener('click', aa);
2) document.getElementById('test').addEventListener('click', bb);

Элемент 'test', это таблица.

Функция bb переписывает innerHTML у элемента, а функция aa проверяет был ли клик по элементу.

Проблема: Функция аa получает event.target, к примеру <td>555</td>, но при проверке element.contains(event.target) получаю false, так как innerHTML уже переписан.
Почему так, ведь на вход обеих функций подаются первоначальные данные, где innerHTML еще не переписан?!

Попытался накидать пример на codepen, но не получилось, там я наблюдаю обратный эффект https://codepen.io/workcode/pen/MWymLPj
Даже установив задержку в 1сек между выполнением функции, там всегда получаю true, так в функцию aa попадают каким-то боком измененные данные.
Т.е. кликаю по 'Hey', а пишет, что клик был по 'Bye', почему?

PS. Объяснил наверно сложно, легче код из 10 строк посмотреть, и результат.

Answer 1

[Александр Присяжный]

Попробуй заменить листенеры на

document.addEventListener('click', clicker, true);
a.addEventListener('click', edt, true);

Вероятно, если события будут вызываться на этапе погружения, а не всплытия, то всё взлетит. Если я вообще правильно понял проблему)

Comments

[Анатолий]

Изменил в примере:
https://codepen.io/workcode/pen/MWymLPj

Но не помогло!

[Александр Присяжный]

Какое вообще ожидается поведение?

Я так понимаю что смена Hey на Bye ожидаема, т.к. для этого есть отдельный метод?
В каком порядке должны происходить какие действия?

[Анатолий]

Александр Присяжный, мне нужно чтобы event.target на входе обоих функций был одинаков.
Т.е. одна и другая функция должны обработать "Hey".

Сейчас получаю, что вначале идет обработка одной функцией, а затем результат передается другой.

[Александр Присяжный]

Анатолий, Там не совсем так. Результат не передаётся от одной функции в другую. Они не знают друг о друге. Просто вначале один метод меняет innerHTML, а когда второй метод срабатывает и читает target события, его содержимое уже изменено.

Есть ощущение что отслеживание кликов должно отрабатывать раньше, чем изменение содержимого.
В текущей реализации всё наборот.

Если где и применять setTimeout, то там, где меняешь innerHTML, а не наоборот, чтобы в консоль отлоггировались и в сравнение попали ещё неизменённые элементы. Хотя это тоже костыльно.

Надо исследовать вопрос, как приоритезировать отработку коллбеков событий клика. Это надо почитать про погружение/всплытие.

[Анатолий]

Александр Присяжный, settimeout надо наоборот, это я тут просто экспериментировал и не вернул обратно.
Возможно Вы правы, вывод в консоль происходит того же event.target, просто к моменту вывода там лежит уже что-то другое.
Коллбеки ИМХО это уже совсем другая история, выходящая за рамки этого вопроса, но если дадите ссылку на статью, буду рад.
У меня на рабочей задаче, true вроде помогло, так что вопрос закрываю.
Спасибо, за подсказку.

[Александр Присяжный]

Рад, что получилось.:)
Странно что в codepen при этом не сработало.
А про какие вы именно коллбеки?
Если про погружение/всплытие, то вот.

[Анатолий]

Александр Присяжный, Вы же сами написали:

приоритезировать отработку коллбеков событий клика.

Я подумал, что это предполагает написание отдельной функции, которая будет сохранять например значение event.target, а затем запускать различные функции, в том числе и синхронно.

[Александр Присяжный]

Анатолий точняк. Пишу на ходу)

Можно что-то такое сконструировать как вы говорите, но лучше обойтись встроенными механизмами, решающими вашу проблему. Да и понимание этого механизма вам ещё не раз поможет при отладке событий и понимания того, что и почему попадает в event.target в разных ситуациях.

Answer 2

[Lector]

Попробуйте проверять не так element.contains(event.target), а вот так
if(event.target.tagName == "DIV")

Comments

[Анатолий]

А не получим ли мы ситуацию, когда при клике по любому div будет true?
contains проверяет вложенность одного элемента в другой, а что проверяет Ваше условие, кроме тега?