javascript - 在 Firefox 中，在 keydown 事件处理程序中更改焦点会自动单击已聚焦的内容。我该如何防止这种情况？

Question

代码如下:http://jsfiddle.net/cPrSZ/2/

HTML

<p>Space changes focus to button</p>
<button id="b1">Button1</button>

JavaScript

var stopProp = function(event) {
    event.stopPropagation()
    event.preventDefault()
    return false;
};

$("#b1").on("click", function(event) {
    alert("Button1 Clicked");
    return stopProp(event);
});

$("body").on("keydown", function(event) {
    if (event.which === 32) {
        $("#b1").focus();
    }
    return stopProp(event);
});

在 Firefox 中，单击该段落以使按钮失去焦点。接下来，按空格键，您将看到按钮单击被触发，即使我的代码没有说这样做。为什么会发生这种情况？

如果我将处理程序附加到 $("p").on("keydown", 而不是 body 上，事情似乎工作正常，但我试图避免为每个可点击元素编写一个处理程序。如果我附加一个“keyup”而不是“keypress”，事情也会正常工作。但我正在制作一个 html5 游戏，我希望能够对按键使用react为了响应性而使用 keyup。

Answer 1

我认为您不需要将 keydown 处理程序更改为 keyup 处理程序。原因如下:

Firefox 似乎将 keyup 事件的组合解释为将焦点应用为与单击相同的东西。我能够克服this fiddle中的问题使用以下代码:

$("body").on("keyup", function (event) {
    if (event.target === document.getElementById('b1')) {
      return stopProp(event); 
    }
});

在这种情况下，每当有按键时，我们都会检查它是否发生在按钮上。如果是这样，我们就取消它。这似乎可以取消意外的点击。