Javascript: проблемы с click event при использовании requestAnimationFrame

Неожиданно столкнулся с забавной проблемой. Кратко суть можно описать так. Допустим, вы используете requestAnimationFrame для динамического изменения цвета текста, например таким образом:

function render() {   element.innerHTML = "<font color='#555'>some text</font>";   requestAnimationFrame(render); }

Если теперь на element (либо на весь документ) повесить обработчик события onclick, а потом кликнуть по тексту, то… ничего не происходит.

Подробнее

Итак, создадим div:

<div id="main"></div>

Растянем его на весь экран:

#main {   width: 100%;   height: 100%;   position: absolute;   cursor: default;   background-color: #CCC;   font-size: 30vh; }

Теперь код:

function render() {   document.getElementById("main").innerHTML = "<font color='#555'>click here</font>";   requestAnimationFrame(render); }  document.body.addEventListener("click", function(e) {   console.log("click"); });  render();

Поиграться с кодом можно тут.

Результат следующий:

• при клике на текст ничего не происходит, событие не возникает
• при клике в любой другой части main событие возникает, в консоли выводится "click"

Дополнительные моменты:

• если убрать font, а оставить просто текст, то клик происходит
• если заменит font на span, то клика все равно не происходит
• если закоментить строку requestAnimationFrame(render), то клик происходит
• другие события, например mousemove, происходят как надо, и над текстом и без него

Зачем это нужно?

Вопрос не совсем относится к теме, но тем не менее: а зачем вообще такой код, какое практическое применение?

Ответ: рассмотрите это как задачку на олимпиаде. Пусть требуется создать страницу, заполненную случайными символами, каждый из которых хаотично меняет цвет. При клике по символу выводить его в консоль.

Создаем класс символа, в котором есть метод getText, выдающий символ текущего цвета, что-то вроде этого:

// some code  symbol.prototype.getText = function() {   return "<font color='" + this._color + "'>" + this._text + "</font>"; };

Затем в requestAnimationFrame вставляем пересчет цветов и вывод всех символов по очереди на экран.

Осталось добавить обработку "click".

Решение

Первое, что пришло в голову, решение "в лоб". Добавим еще один div:

<div id="click"></div>

Такого же размера как и main, но прозрачный и с большим z-index:

#click {   width: 100%;   height: 100%;   position: absolute;   cursor: default;   opasity: 0;   z-index: 100; }

После этого клик на тексте и вне его работает нормально.

Из других вариантов приходит на ум только следующее. Заранее добавить для каждого символа элемент span с уникальным индексом, а в requestAnimationFrame просто менять цвет через document.getElementById("span_id").style.color. Мне кажется этот вариант слишком громоздким.

Послесловие

Я не разбирался, в чем конкретная причина такого поведения click-а. Если есть люди, которые понимают, в чем тут дело, просьба поделиться мудростью. Спасибо!

ссылка на оригинал статьи https://habrahabr.ru/post/279817/