Javascript Делегирование событий / пузыри - PullRequest
Новая
       30

Javascript Делегирование событий / пузыри

0 голосов
/ 10 января 2020

Я хочу отключить все ссылки с классом "nolink" в разделе тела для маршрутизатора SPA. Для этого я использовал делегирование событий, которое не очень хорошо работает с вложенными элементами. (Упрощенный код ниже).

HTML: 

<header id="header">
  <nobr>
    <a href="home" class="nolink">
      <img src="image.png">
      <span>Title</span>
    </a>
  </nobr>
  <ul>
    <li><a href="link1" class="nolink">Link 1</a></li>
    <li><a href="link2" class="nolink">Link 2</a></li>
    <li><a href="link3" class="nolink">Link 3</a></li>
    <li><a href="link4" class="nolink">Link 4</a></li>
  </ul>
</header>

JavaScript: 

class Delegator {
  constructor(wrapper) {
    this.wrapper = wrapper || document.body;
  }

  add({ selector, event, callback }) {
    this.wrapper.addEventListener(event, e => {
      const target = e.target;
      if (target.matches(selector) /* bad code: */ || target.parentElement.matches(selector) || target.parentElement.parentElement.matches(selector)) {
        e.preventDefault();
        callback(e);
      }
    })
  }
}

function readyLink(event) {
  let href = event.target.href /* bad code: */ || event.target.parentElement.href || event.target.parentElement.parentElement.href;
  history.pushState(null, null, href);
  event.preventDefault();
  router.fetch(href.split("/").pop());
  router.route(href);
}

const router = new Router(...);
const bodyDelegator = new Delegator();
bodyDelegator.add({
  selector: `a.${nolink}`,
  event: "click",
  callback: readyLinks
});

Меня беспокоит необходимость ссылаться на target.parentElements на маршрутизацию событий при нажатии на изображение или элемент span. Я хочу, чтобы на них повлияла функция add без необходимости указывать тысячу parentElements для возможного использования в будущем.

1 Ответ

2 голосов
/ 10 января 2020

Используйте Element.closest(), чтобы найти, соответствует ли сам элемент или один из его родителей селектору: 

class Delegator {
  constructor(wrapper) {
    this.wrapper = wrapper || document.body;
  }

  add({ selector, event, callback }) {
    this.wrapper.addEventListener(event, e => {
      const target = e.target;

      if (target.closest(selector)) {
        e.preventDefault();
        callback(e);
      }
    })
  }
}

Передача ближайшего к обратному вызову: 

class Delegator {
  constructor(wrapper) {
    this.wrapper = wrapper || document.body;
  }

  add({ selector, event, callback }) {
    this.wrapper.addEventListener(event, e => {
      const target = e.target;

      const actual = target.closest(selector);

      if (actual) {
        e.preventDefault();
        callback(e, actual);
      }
    })
  }
}

И тогда readyLink может получить href от фактического элемента. Я все равно передал бы событие для других целей (например, вызов preventDefault). 

function readyLink(event, actualTarget) {
  let href = actualTarget.href;
  history.pushState(null, null, href);
  event.preventDefault();
  router.fetch(href.split("/").pop());
  router.route(href);
}
...