Как закрыть попап при клике вне его на чистом js?

Question

[smithana]

Всегда для этих целей использовал этот код на jquery:
$(document).mouseup(function (e){
if (!$('.popup').is(e.target) && $('.popup').has(e.target).length === 0){
$('.popup').hide();
}
});

Но сейчас нужно это реализовать без jquery.

Этот код работает, но не совсем так:
document.addEventListener('mouseup', function(e){
if(e.target.className == '.popup-parent'){
popup.style.display = 'none';
}
});

Проблема в том, что если нажать кнопку мыши на попапе, вывести за её пределы и там отпустить, то jquery ничего не закроет, а нативный закроет.

аналогов для is и has я не нашёл. Подскажите пожалуйста как корректнее переделать код.
Спасибо.

Answer 1

[Immortal_pony]

Проблема в том, что если нажать кнопку мыши на попапе, вывести за её пределы и там отпустить, то jquery ничего не закроет, а нативный закроет.

Ну повесьте не mousedown, а не на mouseup. Например так:

var popup = document.querySelector('.popup');
document.addEventListener('mousedown', function(e){
    if(e.target.closest('.popup') === null){
        popup.style.display = 'none';
    }
});

Answer 2

[M-ka]

не читал на тыц, но в целом код не верный у автора...
итого, как делают обычно: загруз, док клик ф-я с разборкой контента, обход хранилища. В нужный момент обработчик в хранилище закинуть и запуск по необходимости....

Comments

[smithana]

не совсем понял, что вы имеете ввиду под хранилищем? Localstorage?

[M-ka]

smithana, переменная - хранилище для контента, в глобальной или локальной области видимости... (в зависимости от архитектуры)

[smithana]

M-ka, после редактирования первого сообщения всё ещё запутаннее стало)
док клик ф-я с разборкой контента - document addEventListener
какой контент разбираем? ивент, пришедший в функцию?
обход хранилища - зачем? найти попап?
В нужный момент обработчик в хранилище закинуть и запуск по необходимости - тут вроде бы понятно

[Immortal_pony]

M-ka, я как и автор, не понимаю, что вы пишете вообще.
Вы можете объяснить более поятным языком, что вы имеете ввиду?

[M-ka]

Immortal_pony, ну считаю, что написал вполне нормально.... все должно понятно быть любому, кто пишет на жс... ну для тех, кто не понимает, наверное потому, что даже книги не пытался открывать по жс, разберу на части, но готовый код предоставлять не буду (хотя имеется)

загруз -- окончание загрузки контента страници, подготовки всех сценариев
док клик ф-я с разборкой контента, обход хранилища.

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