Почему не работает галерея и крушится вкладка?

Question

[gleendo]

На сайте learn.javascript.ru есть решение задачи по созданию галереи.
Вот оно - plnkr.co/edit/5t7oDEbrx8G3UjUqtM2q
Почему если не сохранять объект события в переменную, ничего не работает, все зависает и вкладка рушится?

Почему не работает вот так?:

var largeImg = document.getElementById('largeImg');

document.getElementById('thumbs').onclick = function(event) {
  while (event.target != this) {

    if (event.target.nodeName == 'A') {
      largeImg.src = event.target.href;
      return false;
    }

    event.target = event.target.parentNode;
  }

}

Answer 1

[Михаил Белошицкий]

Потому что не сохраняя событие в переменную вы в своем цикле, в строчке
event.target = event.target.parentNode;
обновляете не просто собственную переменную, а поле браузерного события. Такими объектами пользуетесь не только вы, но и браузер, поведение которого и может приводить к зависанию.

Конкретнее, что именно может приводить к зависанию, указать не могу, не сталкивался, наверное какие-нибудь стадии "всплытия" и подобные вещи.

Comments

[gleendo]

Михаил Белошицкий А почему вот например в решении другой задачи, у меня все работает, хотя тоже перезаписываю event.target не сохраняя в переменную.

Вот решение:
var wrapper = document.querySelector(".wrapper");

wrapper.addEventListener("click", function() {
while (event.target.tagName != "A") {
event.target = event.target.parentNode;
}

if (!confirm("Перейти на " + event.target.getAttribute("href"))) {
event.preventDefault();
}
}, false);

[Михаил Белошицкий]

Я не могу вам конкретно ответить на этот вопрос, ибо не знаю как именно браузер уводит вас в бесконечный цикл в первом случае. В своей практике просто стараюсь не менять браузерные события и объекты, за исключением очевидных манипуляций с DOMом. Лишних телодвижений это добавляет минимум, зато потом голова от отладки не болит (:

[gleendo]

Михаил Белошицкий: Ну это да, но понимать что да как нужно, всякое бывает, вот и я сейчас хочу понять почему же так все работает. Раз это случилось, нужно разобраться, но походу не разберусь, не кому подсказать((

Answer 2

[Алексей Уколов]

Всё очень просто: свойство target объекта Event недоступно для записи. Соответственно, ваш цикл становится бесконечным, ведь e.target никогда не изменяется.
Никогда не изменяйте ничего в стандартных объектах - этим вы оградите себя от огромного количества проблем.

Comments

[gleendo]

Алексей Уколов Почему тогда в решении другой задачи я перезаписываю event.target и все работает?

var wrapper = document.querySelector(".wrapper");

wrapper.addEventListener("click", function() {
while (event.target.tagName != "A") {
event.target = event.target.parentNode;
}

if (!confirm("Перейти на " + event.target.getAttribute("href"))) {
event.preventDefault();
}
}, false);

[Алексей Уколов]

По ксерокопии кода сложно понять о чем речь, но подозреваю, что в event.target изначально хранится тег A, поэтому цикл просто игнорируется.