@sanex3339

Можно ли заблокировать event у document'a с useCapture = true?

Суть: есть на странице определенный элемент N.
У него есть eventListener.

Так же у document'а тоже есть eventListener с useCapture = true.

Мне нужно, что бы при нажатии на элемент N сработал только его eventListener.
event.stopPropagation при использовании useCapture не срабатывает, т.к. блочит только bubbling фазу.

Есть ли какой способ?
  • Вопрос задан
  • 202 просмотра
Решения вопроса 1
event.stopPropagation и event.stopImmediatePropagation это все предоставляемые возможности, то есть отменять можно лишь то, что идёт после. А учитывая, что раньше capture-обработчика на document выполняется лишь такой же обработчик на window, то со стороны какого-либо вложенного элемента вы никак не сможете его отменить. Остаётся лишь вариант обернуть код обработчика на document проверкой:

document.addEventListener("click", function(event) {
  if (!$(event.target).closest("#element").length) {
    // ...
  }
}, true);

Если jQuery не используется замена будет выглядеть например так:

if (!Element.prototype.matches) {
  Element.prototype.matches =
    Element.prototype.matchesSelector ||
    Element.prototype.webkitMatchesSelector ||
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector;
}

Element.prototype.closest = function(selector) {
  var target = this;

  while (target && target != document) {
    if (target.matches(selector)) {
      return target;
    }

    target = target.parentNode;
  }

  return null;
};

document.addEventListener("click", function(event) {
  if (!event.target.closest("#element")) {
    // ...
  }
}, true);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы