Question

在chrome和firefox（以及其他人）中，如果你有一个聚焦的输入，按“空格”和“输入”会为你点击它们。我正在制作一个HTML 5游戏，我想重写空间和输入对焦点的反应，默认行为正在妨碍我。有没有办法在大多数浏览器中关闭此默认行为？

<button>Button<button>
$("button").on("click", function(event) { alert("Clicked"); });

如果单击该按钮，则会显示良好的警报。但如果您在单击后按“空格”或“输入”，它也会发出警报。我想防止这种行为，这样我就可以在没有干扰的情况下编写自己的行为。

Answer 1

您可以使用event.detail解决此问题。这将返回单击按钮的次数。如果按Enter键，则返回0，因为您单击了0次，如果您通过鼠标单击它，则返回单击按钮的次数。

要访问event.detail，您需要访问原始事件对象。这可以通过jQuery事件对象中的event.originalEvent来完成。所以，如果你只是在脚本中加上if语句：

if (event.originalEvent.detail != 0) {
    //your click event code
}

然后只有在您通过鼠标实际点击按钮时才会运行。

这比检查按钮是否有:focus要准确得多，因为当您点击它时按钮会自动聚焦，所以这样做会在单击后禁用按钮。

Answer 2

检查按钮是否处于活动状态：

$("button").on("click", function(event) { alert("Clicked"); });

$(document).on('keydown', function(e){

    if($(document.activeElement).is('button') && 
                                         (e.keyCode === 13 || e.keyCode === 32)) 
        e.preventDefault();
});

您还可以使用jQuery的:focus选择器，该选择器应返回相同的元素$(':focus').is('button')。

http://jsfiddle.net/zmH5V/4/

Answer 3

其他选项是单击后立即模糊对象：

<button id="mybutton" onclick="myFunction();this.blur();">button</button>

我发现该解决方案更易于使用，因为它需要更少的代码行，并获得相同的结果：当按钮模糊时，它与键盘事件没有联系，这解决了问题。

空格并输入“点击”关注的输入。如何禁用此行为？

3 个答案: