Форум

Янковиц · #1 (**permalink**) 01.05.2021, 18:17

Приветствую. Есть условно элемент-кнопка:

<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?

рони · #2 (**permalink**) 01.05.2021, 18:40

Сообщение от Янковиц

Как вижу,

Цитата:

какие ваши доказательства?

Янковиц · #3 (**permalink**) 01.05.2021, 18:47

На тестовом скрипте так работает. Просто, если я добавляю внутрь button svg, то клик срабатывает только если курсор находится на поле padding этой кнопки. Если над svg, то почему-то не срабатывает.

рони · #4 (**permalink**) 01.05.2021, 18:51

Янковиц,
где нерабочий код?

<!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>

Янковиц · #5 (**permalink**) 01.05.2021, 18:57

Наверно, я не правильно задал вопрос. Да, клик действительно отрабатывает. Точнее будет так сказать:

$( 'button' ).click(function() {
  var data = $( this ).data( 'text' );
  // и здесь некоторые действия на основании атрибута data
});

В JQuery мне не нужно проверять на каком я элементе. Здесь я точно знаю, что this это button, даже если у него много дочерних элементов. А вот в JS придётся же обращаться к возможному родителю, чтобы точно работать с кнопкой?

рони · #6 (**permalink**) 01.05.2021, 19:06

Сообщение от Янковиц

А вот в 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>

Янковиц · #7 (**permalink**) 01.05.2021, 19:09

Спасибо, что прояснил вопрос

рони · #8 (**permalink**) 01.05.2021, 19:09

Янковиц,
не используйте стрелочные функции, если есть недопонимание про this

Форум

Справочник

Discord чат

Курсы javascript