Главная

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

2016-03-21 в 14:34, admin, рубрики: click, javascript, 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-а. Если есть люди, которые понимают, в чем тут дело, просьба поделиться мудростью. Спасибо!

Автор: cnupm99

Источник