Событие на родительском при клике по дочернему элементу
Приветствую. Есть условно элемент-кнопка:
<button><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">//некий путь</svg></button> Как вижу, в JS событие button.addEventListener( "click" , () => alert('Спасибо!')); срабатывает только непосредственно на элемент button. А вот если курсор находится над SVG, то ожидаемое событие не срабатывает. В jQuery же, событие click срабатывает и при клике по кнопке button и при клике на дочерний SVG. Подскажите, как в JS сделать такое же поведение, что и на jQuery? Неужели только через closest? |
Цитата:
Цитата:
|
На тестовом скрипте так работает. Просто, если я добавляю внутрь button svg, то клик срабатывает только если курсор находится на поле padding этой кнопки. Если над svg, то почему-то не срабатывает.
|
Янковиц,
где нерабочий код?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
svg{
background-color: #FF0000
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
document.querySelector("button").addEventListener( "click" , () => alert('Спасибо!'));
});
</script>
</head>
<body>
<button><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" >//некий путь</svg></button>
</body>
</html>
|
Наверно, я не правильно задал вопрос. Да, клик действительно отрабатывает. Точнее будет так сказать:
$( 'button' ).click(function() {
var data = $( this ).data( 'text' );
// и здесь некоторые действия на основании атрибута data
});
В JQuery мне не нужно проверять на каком я элементе. Здесь я точно знаю, что this это button, даже если у него много дочерних элементов. А вот в JS придётся же обращаться к возможному родителю, чтобы точно работать с кнопкой? |
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
svg{
background-color: #FF0000
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
document.querySelector("button").addEventListener( "click" , function() {
alert(this.dataset.text);
});
});
</script>
</head>
<body>
<button data-text="Спасибо!"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" >//некий путь</svg></button>
</body>
</html>
|
Спасибо, что прояснил вопрос :)
|
Янковиц,
не используйте стрелочные функции, если есть недопонимание про this |
| Часовой пояс GMT +3, время: 03:31. |