Как правильно делегировать target?

Question

[Gias]

Здравствуйте. Есть кнопка

<div class="modal__buttons">
                    <button id='reload' class='modal__btn'>
                         <svg class="modal__svg">
                              <use xlink:href="#reload__icon"></use>
                         </svg>
                    </button>

Есть функция:

document.querySelector('#full__page').onclick = function(e) {
     alert(e.target.id);
     if (!e.target.classList.contains('modal__btn')) return;
     modal(e.target.id);
   };

Как можно правильно сделать target на кнопку? На данный момент лучший вариант, это привязать всем один class.

Comments

[Demian Smith]

Привязка событий onclick к заведомо некликабельным элементам считается гнилой практикой. Как говорится "гугл так не делает". Некликабельные элементы - это всякие там дивы, спаны и, в принципе любые элементы, которые нельзя сфокусировать, например, при помощи клавиатуры.

В вашем случае, привяжите событие onclick к самой кнопке. Если область клика должна быть больше чем сама кнопка, то это значит что кнопка должна быть больше. Кнопка ведь может быть прозрачной и хранить в себе иконку и иметь какой угодно паддинг. Так вы решите свою проблему нативным способом, а это значит что этот способ будет работать на любых устройствах и в любых браузерах.

[Demian Smith]

Хотя возможно я вас неправильно понял.

[Gias]

Demian Smith, на самой кнопке не выходит, так как она динамическая...
Ну как вариант, действительно невидимые button и svg, click по use. Ну этот вариант после второй по предпочтению после объявления одинаковых классов.