在模式中通过 ESC 关闭文件对话框，该模式也通过 ESC 关闭

Question

我有一个模态对话框 div 设置为在用户按下 ESC 时关闭，如下所示：

//close modal when pressing Esc
document.addEventListener('keyup', function (e) {
    if (e.keyCode === 27) {
        m.style.display = 'none';
        mbg.style.display = 'none';
    }
});

到目前为止一切都很好。

在某些情况下，活动模式有一个文件上传按钮。当文件资源管理器对话框打开并按下 ESC 时，它会关闭文件资源管理器和模式。

当我按 ESC 关闭文件资源管理器时，如何防止模式关闭？

Answer 1

基本上当文件输入对话框打开时（点击事件）设置一个变量来指示对话框打开。然后，您可以绑定到文件输入的 onchange 事件，该事件指示对话框已关闭（包括取消和确认按钮）并将变量设置回来。然后在单击 esc 键时检查变量以查看对话框是否打开。

var isDialogOpen = false;

var fileInput  = document.getElementById("fileInput");
fileInput.addEventListener("click", function(){isDialogOpen = true;});
fileInput.addEventListener("change", function(){isDialogOpen = false;});

document.addEventListener('keyup', function (e) {
    if (e.keyCode === 27 && !isDialogOpen) {
        m.style.display = 'none';
        mbg.style.display = 'none';

    }
});

凭记忆写的，但大致概念就在那里

在模式中通过 ESC 关闭文件对话框，该模式也通过 ESC 关闭

Close File Dialog via ESC in a Modal Which Also Closes via ESC

javascript

modal-dialog