- PVSM.RU - https://www.pvsm.ru -
Неожиданно столкнулся с забавной проблемой. Кратко суть можно описать так. Допустим, вы используете 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();
Поиграться с кодом можно тут [1].
Результат следующий:
Дополнительные моменты:
Зачем это нужно?
Вопрос не совсем относится к теме, но тем не менее: а зачем вообще такой код, какое практическое применение?
Ответ: рассмотрите это как задачку на олимпиаде. Пусть требуется создать страницу, заполненную случайными символами, каждый из которых хаотично меняет цвет. При клике по символу выводить его в консоль.
Создаем класс символа, в котором есть метод 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
Источник [2]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/115683
Ссылки в тексте:
[1] можно тут: http://codepen.io/cnupm99/pen/Mypmze
[2] Источник: https://habrahabr.ru/post/279817/
Нажмите здесь для печати.