Почему обработчик событий срабатывает на дочерних элементах?
Подскажите, почему, когда подключаешь обработчик событий на родительский элемент, он срабатывает и на дочерних? Есть ли способ это изменить?
Для примера:
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <div class="sub-main"> <div class="inner">test1</div> </div> </div> <script src="script.js"></script> </body> </html> |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <div class="sub-main"> <div class="inner">test1</div> </div> </div> <script src="script.js"></script> </body> </html>
JS
const mainElement = document.querySelector(".main"); mainElement.addEventListener('click', function(e){ console.log(e.currentTarget.className); }) |
const mainElement = document.querySelector(".main"); mainElement.addEventListener('click', function(e){ console.log(e.currentTarget.className); })
CSS
.main { width: 200px; height: 50px; border: 1px solid #333; } .sub-main { width: 150px; height: 45px; border: 1px solid red; } .inner { width: 100px; height: 40px; border: 1px solid purple; text-align: center; } |
.main { width: 200px; height: 50px; border: 1px solid #333; } .sub-main { width: 150px; height: 45px; border: 1px solid red; } .inner { width: 100px; height: 40px; border: 1px solid purple; text-align: center; }
То есть при клике на элемент inner событие срабатывает, а по задумке не должно.
Дополнительно:
https://learn.javascript.ru/bubbling-and-capturing
Событие проходит фазы жизненного цикла называемые "Всплытием и погружением", поэтому и отрабатывает событие. Подробнее в статье: https://learn.javascript.ru/bubbling-and-capturing
Ответы:
попробуй
const inner = document.querySelector(".inner") inner.addEventListener('click', (e) => { e.stopPropogation() }) |
const inner = document.querySelector(".inner") inner.addEventListener('click', (e) => { e.stopPropogation() })
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, с которой вы столкнулись, связана с тем, что обработчик событий срабатывает на дочерних элементах. Это происходит из-за того, что события всплывают вверх по иерархии DOM, начиная с целевого элемента, на котором произошло событие, и заканчивая корневым элементом страницы.
Чтобы предотвратить срабатывание обработчика событий на дочерних элементах, можно использовать метод event.stopPropagation() внутри обработчика события. Этот метод останавливает всплытие события, предотвращая его дальнейшее распространение по иерархии DOM.
Пример кода на JavaScript с использованием event.stopPropagation():
document.getElementById('parentElement').addEventListener('click', function(event) { event.stopPropagation(); // Ваш код обработчика события });
Таким образом, при клике на дочерний элемент событие не будет всплывать до родительского элемента и обработчик события не будет срабатывать на нем.
Также, стоит учитывать порядок обработчиков событий при использовании метода event.stopPropagation(), чтобы не нарушить логику работы других обработчиков на странице.
Надеюсь, данное объяснение поможет вам понять, почему обработчик событий срабатывает на дочерних элементах, и как можно предотвратить это. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.