Как отменить переход по ссылке в выпадающем меню?

Question

[fiter]

test1.fiter.su
Для мобильных устройств нужно отменить переход по ссылкам при клике на первый уровень в выпадающем меню. Нужно чтобы меню раскрывалось и юзер мог кликать на появившиеся подпункты меню.
Пробовал решить это добавлением "onclick="return screen.width > 940"
Если кликнуть на меню сразу после загрузки страницы, то всё работает, но если сначала походить по странице и куда-нибудь тыкнуть, то появляется баг:
При клике на пункт из выпадающего списка не происходит перехода по ссылке, меню просто сворачивается обратно.
Помогите решить проблему плз, желательно без jQuery.

Answer 1

[Karcev]

Рабочий вариант

// Выбираете элемент у которого блокируем переход по ссылке
const expandMenu = document.querySelectorAll(".menu-item");

// Задаете ширину экрана при которой происходит работа
let sizeWindow = window.matchMedia('(max-width: 1024px)');

// Перебираете массив с элементами expandMenu
for(let i = 0; i < expandMenu.length; i++) {
  expandMenu[i].addEventListener("click", linkClick(i));
}

// Сравниваете текущий размер окна с заданным и если true то блокируете переход по ссылке
function linkClick(i) {
  if (sizeWindow.matches === true) {
    console.log("Если мобильная версия, отключаем переход по ссылке");
    return function (e) {
      e.preventDefault();
    };
  }
}

Answer 2

[Алексей Рытиков]

Если я правильно понял, то вы можете повесить только общий обработчик на все кнопки меню. Если бы было не так, то вы бы повесили предложенный обработчик только на нужные кнопки.

Как одно из решений, можете добавить в свой обработчик дополнительное условие проверяющее, соседний элемент с "a" – это "ul"?

onclick="if(screen.width <= 940 && this.nextSibling.nodeName === 'UL') event.preventDefault()"

Comments

[fiter]

Нет, событие висит только на нужных ссылках. Посмотрите test1.fiter.su