Функция с event.target не корректно отрабатывает?

Question

[Денис]

Здравствуйте. Подскажите, пожалуйста, почему не правильно отрабатывает функция

document.querySelector('.tvz-modal').addEventListener('click', function(e) {
        var $this = this;
        var target = e.target || e.srcElement;
        //e.stopPropagation();

        while(target != $this) {
            if(target.classList.contains('tvz-modal')) {
                self.closeAll();
            }
            target = target.parentNode;
            console.log(target, $this);
        }
    });

Идея состоит в том, чтобы при клике на любую свободную от формы в модальном окне область, модальное окно закрывалось. Оно в принципе закрывается...но кликнув на поле из формы модального окна также все закрывается...

Answer 1

[Сергей Волевач]

Попробуйте так

document.querySelector('.tvz-modal').addEventListener('click', function(e) {
        var target = e.target;
        if(target.classList.contains('tvz-modal'))
        	self.closeAll();
    });

Answer 2

[Антон Жуков]

кроме target есть еще и currentTarget
https://developer.mozilla.org/ru/docs/Web/API/Even...

сделайте проверку DomElement подложки окна === DomElement подходящего таргета

если нет подложки - сделайте её - зафигачив fixed div на весь экран под модальным окном

Answer 3

[Денис]

Ну так currentTarget если даже и не будет равен $this, то выполнится target = target.parentNode; пока он не станет им равным...И даже кликнув по форме currentTarget не будет равным $this, но будет выполняться инструкция target = target.parentNode; ...это замкнутый круг какой то((