Javascript Escape按键事件从上一个操作延迟

我有一个用javascript编写的自定义对话框，它有一个键侦听器，当有人按下escape键时，可以关闭它

$(window).on(
    "keyup", 
    function(e) {
        var code = e.keyCode || e.which;
        if (code === 27) {
            _close(e);
            e.preventDefault();
            e.stopPropagation();
            return false;
        }
    }
);

对话框内容中有一个文件输入：

<input type="file" />

但是，当用户单击文件输入按钮时，系统文件选择器对话框打开，然后通过escape键关闭，我遇到了一个问题。系统对话框关闭，然后触发

“keyup”

事件，从而关闭我的自定义对话框。这就好像系统文件选择器对话框中的escape键在不应该传播的情况下正在传播

我本以为这是浏览器中的一个bug，但我在Chrome和Firefox for mac上都看到了这种情况

有什么想法吗

编辑：我已经创建了一个测试脚本供其他人查看：

---

Edit2：我应该注意，我之所以使用

keyup

而不是

keypress

是因为Chrome出于某种原因没有将escape按键注册为

keypress

你说得对，我已经测试过了，真是糟糕透了，我花了50分钟才找到解决办法，试试这个

解释：两个全局变量

fileDialogOpen始终为false，如果单击输入字段，则为true， fileDialogOnClose在对话框最近关闭时变为true

关闭“文件”对话框有两种方法， 第一个-用户鼠标位于文件对话框上方 这将导致在文件对话框关闭时触发窗口onmouseover事件 因此，我重置了fileDialogOpen（如果之前为true），并设置fileDialogOnClose

第二个-用户鼠标不在文件对话框上，然后当onkeyup窗口中的FileDialogOpen为true时，单击escape按钮

<input type="file" onclick="fileDialogOpened=true;"/>
<script type="text/javascript">
var fileDialogOpened=false;         //--- true when file dialog is open
var fileDialogOnClose=false;        //--- true when the dialog is closed short time before

window.onkeyup=function (event) 
    {
    if (event.keyCode==27)
        {
        if (fileDialogOpened)           //--- belongs to case 2 - user mouse was not over the file dialog box and was closed with escape, so the fileDialogOpen is true because it was not reset in the window mouseover
            {
            fileDialogOpened=false;       //--- setting to false because dialog is now closed
            fileDialogOnClose=true;         //--- setting to true because dialog was closed short time before
            }
        if (!fileDialogOnClose) alert ("test");   //---- put your code into this if statement

        fileDialogOnClose=false;        //--- resetting the dialog onclose
        }
    }

window.onmouseover=function ()      //--- belongs to case 1 -- user mouse is over the file dialog box
    {

    if (fileDialogOpened)             //--- setting onclose to true, and reseting onclose to false after 100ms, to keep it true if the onkeyup fires shortly after that, because user closes dialog with escape
        {
        fileDialogOnClose=true;
        setTimeout ("fileDialogOnClose=false",100);
        }
    fileDialogOpened=false;           //--- resetting the Dialog Open because file dialog is now closed
    }

</script>

var fileDialogOpened=false；//--打开文件对话框时为true
var fileDialogOnClose=false；//--如果对话框在之前短时间内关闭，则为true
window.onkeyup=函数（事件）
{
if（event.keyCode==27）
{
如果（fileDialogOpen）/---属于案例2-用户鼠标未在文件对话框上方，并使用escape关闭，则fileDialogOpen为true，因为它未在鼠标上方的窗口中重置
{
fileDialogOpened=false；//---设置为false，因为对话框现在已关闭
fileDialogOnClose=true；//---设置为true，因为对话框在此之前很短时间内关闭
}
if（！fileDialogOnClose）alert（“test”）；//----将代码放入此if语句中
fileDialogOnClose=false；//---重置对话框onclose
}
}
window.onmouseover=function（）/——属于案例1——用户鼠标位于文件对话框上方
{
if（fileDialogOpened）/---将onclose设置为true，并在100ms后将onclose重置为false，以便在onkeyup不久后触发时保持为true，因为用户使用escape关闭对话框
{
fileDialogOnClose=true；
setTimeout（“fileDialogOnClose=false”，100）；
}
fileDialogOpened=false；//---重置对话框打开，因为文件对话框现在已关闭
}

你说得对，我已经测试过了，真是糟糕透了，我花了50分钟才找到解决办法，试试这个

解释：两个全局变量

fileDialogOpen始终为false，如果单击输入字段，则为true， fileDialogOnClose在对话框最近关闭时变为true

关闭“文件”对话框有两种方法， 第一个-用户鼠标位于文件对话框上方 这将导致在文件对话框关闭时触发窗口onmouseover事件 因此，我重置了fileDialogOpen（如果之前为true），并设置fileDialogOnClose

第二个-用户鼠标不在文件对话框上，然后当onkeyup窗口中的FileDialogOpen为true时，单击escape按钮

<input type="file" onclick="fileDialogOpened=true;"/>
<script type="text/javascript">
var fileDialogOpened=false;         //--- true when file dialog is open
var fileDialogOnClose=false;        //--- true when the dialog is closed short time before

window.onkeyup=function (event) 
    {
    if (event.keyCode==27)
        {
        if (fileDialogOpened)           //--- belongs to case 2 - user mouse was not over the file dialog box and was closed with escape, so the fileDialogOpen is true because it was not reset in the window mouseover
            {
            fileDialogOpened=false;       //--- setting to false because dialog is now closed
            fileDialogOnClose=true;         //--- setting to true because dialog was closed short time before
            }
        if (!fileDialogOnClose) alert ("test");   //---- put your code into this if statement

        fileDialogOnClose=false;        //--- resetting the dialog onclose
        }
    }

window.onmouseover=function ()      //--- belongs to case 1 -- user mouse is over the file dialog box
    {

    if (fileDialogOpened)             //--- setting onclose to true, and reseting onclose to false after 100ms, to keep it true if the onkeyup fires shortly after that, because user closes dialog with escape
        {
        fileDialogOnClose=true;
        setTimeout ("fileDialogOnClose=false",100);
        }
    fileDialogOpened=false;           //--- resetting the Dialog Open because file dialog is now closed
    }

</script>

var fileDialogOpened=false；//--打开文件对话框时为true
var fileDialogOnClose=false；//--如果对话框在之前短时间内关闭，则为true
window.onkeyup=函数（事件）
{
if（event.keyCode==27）
{
如果（fileDialogOpen）/---属于案例2-用户鼠标未在文件对话框上方，并使用escape关闭，则fileDialogOpen为true，因为它未在鼠标上方的窗口中重置
{
fileDialogOpened=false；//---设置为false，因为对话框现在已关闭
fileDialogOnClose=true；//---设置为true，因为对话框在此之前很短时间内关闭
}
if（！fileDialogOnClose）alert（“test”）；//----将代码放入此if语句中
fileDialogOnClose=false；//---重置对话框onclose
}
}
window.onmouseover=function（）/——属于案例1——用户鼠标位于文件对话框上方
{
if（fileDialogOpened）/---将onclose设置为true，并在100ms后将onclose重置为false，以便在onkeyup不久后触发时保持为true，因为用户使用escape关闭对话框
{
fileDialogOnClose=true；
setTimeout（“fileDialogOnClose=false”，100）；
}
fileDialogOpened=false；//---重置对话框打开，因为文件对话框现在已关闭
}

哦，天哪，计时器也让我不满意，似乎有时onkeyup的启动时间会超过100毫秒。 在再次思考和测试之后，我发现了另一个解决方案，即在窗口对话框（如alert或file dialog）上按一个键不会导致onkeydown，只会导致onkeyup

如果您使用警报框，用户点击escape，您的对话框也将关闭，您也会遇到同样的问题

所以我生成了这个简单的解决方案，它真的很有效，哈哈，生活可以如此轻松+++++++

 <input type="file"/>
 <script type="text/javascript">
 var windowContent_keyDown;

 window.onkeydown=function ()
    {
    windowContent_keyDown=true;
    }

 window.onkeyup=function (event) 
   {
   if (event.keyCode==27 && windowContent_keyDown) alert ("test");
   windowContent_keyDown=false;
   } 

var windowContent\u键控；
window.onkeydown=函数（）
{
windowContent\u keyDown=true；
}
W