Question

我有一个用javascript编写的自定义对话框，如果有人点击了转义键，它会有一个关键监听器来关闭它。

$(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" />

但是当我遇到问题时，用户单击文件输入按钮并打开系统文件选择器对话框，然后通过转义键关闭。系统对话框关闭，然后"keyup"事件也会被触发，从而关闭我的自定义对话框。就好像系统文件选择器对话框中的转义键按下时不会传播一样。

我原本以为这是浏览器中的一个错误，不过我在Chrome和Firefox上都看到了这种情况。

有什么想法吗？

编辑：我为其他人创建了一个测试脚本，可以看到：http://codepen.io/anon/pen/vhrxJ

Edit2：我应该注意，我使用keyup而不是keypress的原因是因为某些原因Chrome没有使用keypress注册转义键。

Answer 1

哦，男人，计时器也引起了我的不满，似乎有时候onkeyup会在100ms之后开火。经过思考和再次测试后，我找到了另一种解决方案，使用了一个窗口对话框类似警报或文件对话框上的按键，只会导致onkeyup上没有onkeydown fire。

如果您使用警告框并且用户点击了转义，您将遇到同样的问题，您的对话框也会关闭。

所以我生成这个简单的解决方案，它真的很有用，生活可以很容易。 +++++++

 <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;
   }

Answer 2

你是对的我已经对它进行了测试，真的很糟糕，我花了50分钟为此生成一个解决方法，试试这个

解释：两个全局变量。

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

关闭文件对话框有两种方法，第一个用户鼠标在文件对话框上这将导致窗口onmouseover事件在文件对话框关闭时触发所以我重置fileDialogOpen如果之前是真的并设置fileDialogOnClose

第二个 - 用户鼠标没有在文件对话框上，然后当onDup窗口中的fileDialogOpened为真时触发了转义按钮

<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>

Escape按键事件从前一个操作延续

2 个答案: