1

Я пытаюсь сделать делегирование событий на чистом JS. У меня есть кнопка внутри контейнера:

<div id="quiz">
  <button id="game-again" class="game-again"><span class="icon-spinner icon"></span><span>Go again</span></button>
</div>

Следуя инструкциям Дэвида Уолша, я добавляю обработчик события на родителя кнопки таким образом:

this.container.addEventListener('click', function(e){
  if (e.target && e.target.id == 'game-again') {
      e.stopPropagation();
      self.publish('primo:evento');
  }
});

Где this.container это элемент #quiz. Это работает в половине случаев, но в остальных target события клика это один из спанов внутри кнопки, потому обработчик события не срабатывает. Как исправить ситуацию?


ассоциация https://stackoverflow.com/questions/24117369/vanilla-js-event-delegation-dealing-with-child-elements-of-the-target-element

1 ответ 1

1

Современные браузеры

Современные браузеры поддерживают .matches:

this.container.addEventListener('click', function(e){
  if (e.target.matches('#game-again, #game-again *')) {
    e.stopPropagation();
    self.publish('primo:evento');
  }
});

Для большей поддержки браузеров, можете получить версию без префиксов

var matches = document.body.matchesSelector || document.body.webkitMatchesSelector || document.body.mozMatchesSelector || document.body.msMatchesSelector || document.body.webkitMatchesSelector || document.body.matchesSelector

и потом использовать при помощи .apply (IE9+).

Старые браузеры

Если вам необходимо поддерживать более старые браузеры, метод такой: пройтись вверх по дереву DOM.

function hasInParents(el, id){
  if(el.id === id) return true; // элемент
  if(element.parentNode) return hasInParents(el.parentNode,id); // родитель
  return false; // не элемент и не родитель
}

Однако, таким образом будет перебираться DOM целиком, а вам необходимо остановиться у вашего элемента:

function hasInParentsUntil(el,id,limit){
  if(el.id === id) return true; // элемент
  if(el === limit) return false;
  if(element.parentNode) return hasInParents(el.parentNode,id); // родитель
  return false; // не элемент и не родитель
}

И код будет выглядеть таким образом:

this.container.addEventListener('click', function(e){
  if (hasInParentsUntil(e.target, 'game-again', container)) {
      e.stopPropagation();                                  
      self.publish('primo:evento');
  }
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.