При событии mouseup функция setTimeout неправильно обрабатывается

Question

У меня написан скрипт отвечающий за появление и исчезание попап окна, и я хочу чтобы это окно плавно появлялось и плавно пропадала. Для этого я выставил попап окну стили transition и через opacity делал окно прозрачным и после окончания анимации с помощью setTimeout в js выдавал display: none попап окну. Но скрипт отвечающий за закрытие окна, при клике вне области попап окна, работает не как нужно. Как только я открываю окно - этот скрипт сразу его скрывает выдавая display: none. Если же просто этот скрипт запускать без setTimeout все работает как надо.

Скрипт отвечающий за открытие и закрытие попап окна:

// отвечает за открытие окна при клике на кнопку
$("#myBtn").on('click', function () {
    $("#myModal").css('display', 'block')
    $("#myModal").css('opacity', '1')
});
// отвечает за закрытие окна при клике на крестик
$(".close").on('click', function () {
    $("#myModal").css('opacity', '0');
    setTimeout(function(){
        $("#myModal").css('display', 'none');
    }, 500);
});
// отвечает за закрытие окна при клике вне окна
$(document).mouseup(function (e) {
    var div = $(".login-box");
    if (!div.is(e.target) && div.has(e.target).length === 0) {
        $("#myModal").css('opacity', '0');
        setTimeout(function(){
        $("#myModal").css('display', 'none');
    }, 500);
    }
});

Answer 1

Так происходит потому, что после нажатия кнопки, событие идет вверх по иерархии DOM и передается объекту document и window.
Метод Event.stopPropagation() прекращает дальнейшую передачу текущего события.

Пример:

$(window)    .click(function()      { $('#popup').fadeOut(1000); });
$('#button') .click(function(event) { event.stopPropagation(); $('#popup').fadeIn(1000); });
$('#popup')  .click(function(event) { event.stopPropagation(); });

#popup
{
    position: absolute;
    width: 200px;
    height: 200px;
    display: none;
    border: 1px solid gray;
    box-shadow: 5px 5px 2px 1px rgba(0, 0, 255, .2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="button">Show popup!</button>
<div id="popup">Window</div>

БЛОГ НА HUSL

При событии mouseup функция setTimeout неправильно обрабатывается

Ответы (1 шт):