Question

我想使用箭头在页面之间切换（37 - 左箭头，39 - 右箭头）。以下代码适用于Firefox，Chrome和Internet Explorer。

在浏览器中单击“返回”（返回浏览历史记录）按钮后，该解决方案无法与Microsoft Edge一起使用。有人知道如何解决它吗？

<script type="text/javascript">

window.addEventListener("keydown", checkKeyPressed, false);

function checkKeyPressed(event) {

    var x = event.which || event.keyCode;

    if (x == 37) { window.location.href = "page1.html";}
    if (x == 39) { window.location.href = "page2.html";} 
};

</script>

Answer 1

这看起来像个错误。当你使用导航控件（或刷新按钮）时，窗口似乎失去焦点，因此keydown事件不会触发。此外，window.focus似乎也没有按预期工作。

但我找到了一个解决方法（或两个）。第一种是将脚本修改为：

    <script>        
    window.onload = function(){
        document.body.focus();
        document.addEventListener("keydown", checkKeyPressed, false);

        function checkKeyPressed(event) {

            var x = event.which || event.keyCode;

            if (x == 37) { window.location.href = "page1.html"; }
            if (x == 39) { window.location.href = "page2.html"; }
        };            
    }
</script>

然后，您需要在body标签中添加一个标签索引，例如：

<body tabindex="1">

然后，这允许您以编程方式设置页面的焦点（并且它不被像Microsoft.focus（）那样被Microsoft Edge忽略。）您需要将tabindex添加到正文的原因是因为焦点方法是隐式的适用于一组有限的元素，主要是表单和<a href>标记。在最近的浏览器版本中，可以通过显式设置元素的tabindex属性来扩展事件以包括所有元素类型。

此解决方法确实添加了潜在的辅助功能问题，因为您的元素可以通过键盘命令（例如Tab键）获得焦点。虽然我不确定究竟有多少问题。

第二个选项是向页面添加表单元素，并手动设置焦点或添加自动对焦属性：

 <input autofocus>

Edge似乎尊重这一点并给予元素自动对焦，现在你的按键事件将会触发。可悲的是你不能只隐藏这个元素，因为如果隐藏它，它就不再能自动聚焦了。（也许你可以将它的不透明度设置为0）但我没试过。

在两个选项中，我更喜欢使用解决方法1.当我今天下午有机会时，我会将此文件作为Edge团队的连接错误提交。

Microsoft Edge - keydown事件

1 个答案: