主页 / 问题 / 1388774
Accepted
Body
Asked:2022-08-10 01:53:12 +0000 UTC2022-08-10 01:53:12 +0000 UTC

在 mouseup 事件中，setTimeout 函数处理不正确

  • 772

我写了一个脚本负责弹出窗口的出现和消失，我希望这个窗口能顺利出现和消失。为此，我设置了弹出窗口样式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);
    }
});
javascript

1 个回答

  1. Best Answer

    这是因为在单击按钮后，事件沿 DOM 层次结构向上传播并传递给文档和窗口对象。
    该方法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>

    • 2

相关问题