Неожиданно столкнулся с забавной проблемой. Кратко суть можно описать так. Допустим, вы используете 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-а. Если есть люди, которые понимают, в чем тут дело, просьба поделиться мудростью. Спасибо!

Update

Как указал Zibx в комментариях, чтобы состоялось событие click, события mousedown и mouseup должны произойти на одном элементе. Поскольку в данном случае innerHTML постоянно обновляется, этого не случается.