Question

我有一些用户在其间导航的模态。问题是当一个函数从用户点击按钮开始时，它不会停止，它会阻止用户关闭其他模态。

$('#btnother1').click(function () {
pluscount = 1;
vfnumModal.style.display = "none";
vdscrollmodal.style.display = "block";
window.onclick = function windowclosebtn(event) {
    alert(event.target.id);
    if (event.target == vdscrollmodal) {
        vdscrollmodal.style.display = "none";
        return;
    }
}
})

出于测试目的，它会在运行时提醒我目标ID。但在关闭vdscrollmodal后，它会一直警告目标ID。那么如果这个函数开始运行：

function openNav() {
document.getElementById("sidebutton").style.add = "blue";
document.getElementById("Sidenav").style.width = "100%";
document.getElementById("sidenavsub").style.width = "700px";
document.getElementById("Sidenav").style.backgroundColor = "rgba(0,0,0,0.4)";
window.onclick = function windowclose(event) {
    if (event.target == document.getElementById('Sidenav')) {
        closeNav();
    }
}
}

closeNav（）确实：

function closeNav() {
document.getElementById("Sidenav").style.width = "0";
document.getElementById("sidenavsub").style.width = "0";
}

“windowclose”事件不会触发。它不断向我显示目标id，这意味着第一个“windowclosebtn”函数仍在运行。我该如何解决？将回报放在“windowclosebtn”中似乎无效。

Answer 1

此处缺少代码。

但是有些事情会像你期望的那样无法发挥作用。

window.onclick = function windowclose(event) {
    if (event.target == document.getElementById('Sidenav')) {
        closeNav();
    }
}

在函数内部使用它不会只触发一次，但任何时候（你将其设置为window.），即使在函数完成后也是如此。

请确保您对opennav。

的行为不同

Answer 2

在另一个单击事件处理程序中分配单击事件处理程序是一个坏主意。这个处理程序永远不会分离，所以即使它完成了它的工作，它也会一直响应到每次点击。

您至少应移动alert块内的if，并将其替换为阻碍性较小的console.log。

如果你只将click处理程序附加一次，并且依赖于在该处理程序本身中进行的测试以查看是否需要执行某些操作，那就更好了。像这样：

$('#btnother1').click(function () {
    pluscount = 1;
    vfnumModal.style.display = "none";
    vdscrollmodal.style.display = "block";
});

function openNav() {
    document.getElementById("sidebutton").style.add = "blue";
    document.getElementById("Sidenav").style.width = "100%";
    document.getElementById("sidenavsub").style.width = "700px";
    document.getElementById("Sidenav").style.backgroundColor = "rgba(0,0,0,0.4)";
}

window.onclick = function windowclosebtn(event) {
    if (event.target == vdscrollmodal) {
        console.log(event.target.id);
        vdscrollmodal.style.display = "none";
        return;
    }
    if (event.target == document.getElementById('Sidenav')) {
        closeNav();
    }
}

Answer 3

那不会关闭它。这只会缩小它。您可能应该尝试将该单击侦听器添加到模式而不是窗口。

Javascript函数不会停止运行

3 个答案: