Как убрать действие preventDefault у ссылок в подмени?

Question

[anmkh]

document.addEventListener('DOMContentLoaded', () => {

  const submenuItem = document.querySelectorAll(".header .menu-item-has-children");
  const menuBody = document.querySelector(".sub-menu");


  submenuItem.forEach((item) => { 
      item.addEventListener('click', handlerItem);

      // слушаем клик вне меню
      document.addEventListener("click", function (e) {
        const target = e.target;
        const its_menu = target == menuBody || menuBody.contains(target);
        const its_btnMenu = target == menuBody;
        const menu_is_active = item.classList.contains("--show");
    
        if (!its_menu && !its_btnMenu && menu_is_active) {
          item.classList.toggle("--show");
        }
      });
      // слушаем скролл
      document.addEventListener("scroll", function () {
        //убираем класс если произошел скролл
        item.classList.remove("--show");
      });
    });


    function handlerItem(e) {
      e.preventDefault();
      e.stopPropagation();
      this.classList.toggle("--show");
  };
  
});

e.preventDefault() почему то распространяется на ссылки в подменю. Как повесить его только на submenuItem ?

Answer 1

[Lapita12]

Чтобы убрать e.preventDefault() для ссылок в подменю, вам нужно добавить проверку на target с помощью if в теле функции handlerItem(). Ниже приведен измененный код:

document.addEventListener('DOMContentLoaded', () => {
  const submenuItem = document.querySelectorAll(".header .menu-item-has-children");
  const menuBody = document.querySelector(".sub-menu");

  submenuItem.forEach((item) => {
    item.addEventListener('click', handlerItem);

    // слушаем клик вне меню
    document.addEventListener("click", function (e) {
      const target = e.target;
      const its_menu = target == menuBody || menuBody.contains(target);
      const its_btnMenu = target == menuBody;
      const menu_is_active = item.classList.contains("--show");

      if (!its_menu && !its_btnMenu && menu_is_active) {
        item.classList.toggle("--show");
      }
    });

    // слушаем скролл
    document.addEventListener("scroll", function () {
      //убираем класс если произошел скролл
      item.classList.remove("--show");
    });
  });

  function handlerItem(e) {
    if (e.target.classList.contains('sub-menu-link') || e.target.closest('.sub-menu-link')) {
      // если нажата ссылка в подменю, то предотвращаем действие по умолчанию только для нее
      return;
    }

    e.preventDefault();
    e.stopPropagation();

    this.classList.toggle("--show");
  }
});

Я добавил проверку на класс sub-menu-link для e.target и его ближайшего родителя с помощью метода closest(). Если элемент, на который был клик, имеет класс sub-menu-link или является его потомком, тогда e.preventDefault() не выполняется и действие по умолчанию будет выполнено.