Выбор ответа Middle События спрашивают часто обновлено
Ошибка в делегировании
Вопрос
Внутри каждой кнопки <button data-id> лежит иконка <svg>. Иногда клик не удаляет элемент. Какой вариант исправит?
list.addEventListener('click', (e) => {
if (e.target.tagName === 'BUTTON') {
remove(e.target.dataset.id);
}
});
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Брать e.target.closest('button[data-id]') и работать с ним. При клике по иконке target это svg или его path, а не кнопка, и проверка не проходит. closest поднимается до кнопки. currentTarget здесь всегда list, у него нет нужного data-id. stopPropagation и capture не меняют того, какой элемент…
Варианты ответа
- Брать
e.target.closest('button[data-id]')и работать с нимправильный ответ - Заменить
e.targetнаe.currentTarget, чтобы получить кнопку - Добавить
e.stopPropagation()в начало, чтобы клик не уходил вsvg - Навесить обработчик с
capture: true, чтобы ловить клик до иконки
Разбор
При клике по иконке target это svg или его path, а не кнопка, и проверка не проходит. closest поднимается до кнопки. currentTarget здесь всегда list, у него нет нужного data-id. stopPropagation и capture не меняют того, какой элемент окажется в target.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.