В IE 11 не работает JS обработчик события

Question

Есть код:

var menuItem = document.querySelectorAll('.menu-item-has-children');
var subMenu = document.querySelectorAll('.sub-menu');

for (let i = 0; i < menuItem.length; i++) {
  menuItem[i].classList.add('off-arrow');

  menuItem[i].addEventListener('mouseover', function () {
    subMenu[i].style.display = 'block';
    this.classList.add('on-arrow');
    this.classList.remove('off-arrow');
  });

  menuItem[i].addEventListener('mouseout', function () {
    subMenu[i].style.display = 'none';
    this.classList.remove('on-arrow');
    this.classList.add('off-arrow');
  });
}

Вкратце говоря этот код просто поворачивает треугольную стрелку при наведении мыши и убирает при отведении. Не могу понять почему не работает в IE 11. При наведение в IE в консоль выводится ошибка "SCRIPT5007: Не удалось получить свойство "style" ссылки, значение которой не определено или является NULL"

Ссылка на сам ресурс.

score 4 · Answer 1 · answered Jan 25 '18 at 10:07

В IE 11 let некорректно работает внутри цикла, привязывая переменную к общему LexicalEnvironment цикла вместо LexicalEnvironment внутреннего блока. Фактически, он работает как var.

Попробуйте другое решение из этого ответа: Почему асинхронная функция внутри цикла выполняет последнюю итерацию много раз?

Спасибо за информацию про IE11 let. В IE пусть работает как var в других желательно чтоб работал как он работает. — Vladislav Severin, Jan 25 '18 at 11:12

Vladislav Severin · Accepted Answer · 2018-01-25T16:21:46.017

1

Решил проблему путем присвоения в новую переменную итерацию цикла.

let hasItem = menuItem[i];

let toggleMenu = subMenu[i];

for (let i = 0; i < menuItem.length; i++) {

  let hasItem = menuItem[i];
  let toggleMenu = subMenu[i];

  hasItem.classList.add('off-arrow');

  hasItem.addEventListener('mouseover', function () {
    toggleMenu.style.display = 'block';
    this.classList.add('on-arrow');
    this.classList.remove('off-arrow');
  });

  hasItem.addEventListener('mouseout', function () {
    toggleMenu.style.display = 'none';
    this.classList.remove('on-arrow');
    this.classList.add('off-arrow');
  });
}

edited Jan 25 '18 at 16:21

answered Jan 25 '18 at 11:08

Vladislav Severin

79

Что-то мне кажется, что вы вовсе не решили проблему... Проверьте еще раз, желательно на меню с несколькими элементами. – Pavel Mayorov Jan 25 '18 at 11:27
Могу перелазить на хостинг с кодом который написал в ответе. Убедитесь что все работает как положено. – Vladislav Severin Jan 25 '18 at 14:43
Ну-ну, перезаливайте. – Pavel Mayorov Jan 25 '18 at 15:34
Только чтобы там два элемента с классом .menu-item-has-children было. Один-то конечно же будет работать - но для него цикл не нужен. – Pavel Mayorov Jan 25 '18 at 15:35
Да согласен появилась новая проблема. С несколькими выпадающими меню. – Vladislav Severin Jan 25 '18 at 16:09
Вообщем эту проблему тоже решил вместо обычной перемены задал let. Сейчас пере залью. – Vladislav Severin Jan 25 '18 at 16:23
Вот теперь другое дело. – Pavel Mayorov Jan 25 '18 at 16:36

В IE 11 не работает JS обработчик события

2 Answers2