Внезапно я столкнулся с забавной проблемой.
Кратко суть можно описать следующим образом.
Допустим, вы используете requestAnimationFrame для динамического изменения цвета текста, например:
Если теперь прикрепить к элементу (или всему документу) обработчик события onclick и затем щелкнуть по тексту, то.function render() { element.innerHTML = "<font color='#555'>some text</font>"; requestAnimationFrame(render); }
ничего не произойдет. Подробнее
Итак, давайте создадим 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 происходит событие, в консоли отображается «клик».
- если убрать шрифт и оставить только текст, то происходит щелчок
- если заменить шрифт на span, то щелчка все равно не происходит
- если закомментировать строку requestAnimationFrame(render), то происходит клик
- другие события, такие как перемещение мыши, происходят как положено, как над текстом, так и без него.
Предположим, вы хотите создать страницу, заполненную случайными символами, каждый из которых случайным образом меняет цвет. При нажатии на символ отобразите его в консоли.
Создайте класс символов с методом getText, возвращающим текущий цвет символа, примерно так: // some code
symbol.prototype.getText = function() {
return "<font color='" + this._color + "'>" + this._text + "</font>";
};
Затем в requestAnimationFrame вставляем пересчет цвета и выводим на экран все символы по одному.
Остается только добавить обработку «щелчка».
Решение Первое, что пришло в голову, — это лобовое решение.
Давайте добавим еще один div: <div id="click"></div>
Тот же размер, что и основной, но прозрачный и с более высоким индексом z: #click {
width: 100%;
height: 100%;
position: absolute;
cursor: default;
opasity: 0;
z-index: 100;
}
После этого нажатие на текст и за его пределами работает нормально.
Из других вариантов на ум приходит только следующий.
Заранее добавьте элемент span с уникальным индексом для каждого символа и просто измените цвет в requestAnimationFrame с помощью document.getElementById("span_id").
style.color. Мне этот вариант кажется слишком громоздким.
Послесловие Конкретную причину такого поведения щелчка я так и не понял.
Если есть люди, которые понимают, что здесь происходит, поделитесь, пожалуйста, своей мудростью.
Спасибо! Обновлять Как указано Зибкс в комментариях, чтобы событие щелчка произошло, события mousedown и mouseup должны произойти на одном и том же элементе.
Поскольку в этом случае indexinnerHTML постоянно обновляется, этого не происходит. Теги: #JavaScript #requestanimationframe #click #JavaScript
-
Веб-Кастинг – Будущее Онлайн-Образования
19 Oct, 24 -
Пляж
19 Oct, 24 -
8 Новейших Бесплатных Курсов От Microsoft
19 Oct, 24 -
Зимний Волхов: Город-Герой Фильма
19 Oct, 24 -
Черный Рынок Вновь Открылся
19 Oct, 24 -
Хабрафутбол: Хабр Против Intel
19 Oct, 24
