javascript - 此 JavaScript 代码是否会通过禁用一个按键来影响其他按键事件？

Question

我使用它来禁用浏览器中空格键的“滚动”效果。这也会影响其他按键事件吗？

window.onkeydown = function(e) {
    return !(e.keyCode == 32);
};

有人可以解释一下这是在做什么吗？我不确定这段代码是否不好，但它似乎禁用了我的页面中其他与按键相关的代码，我想确保这不是原因。

谢谢!

Answer 1

ASCII 代码 32 是表示空格键的 ASCII 值，您的代码本质上是告诉浏览器在检测到该键代码时返回 false。由于返回了 false，因此您所说的滚动条效果实际上已成功禁用。

但是，这种方便的空格键滚动禁用功能的不幸副作用是它会禁用页面上各处的空格键按键。

如果检测到键码，则不返回 false，而是将当前的 scrollTop 值传递到闭包中，该闭包将函数返回给 setTimeout 事件。当 setTimeout 触发时，scrollTop 位置将重置回首次注册 setTimeout 事件时的值。

window.onkeydown = function(e) {
    if(event.keyCode == 32) { // alert($(document).scrollTop() );
        setTimeout(                 
            (function(scrollval) { 
                return function() { 
                    $(document).scrollTop(scrollval);
                };
            })( $(document).scrollTop() ), 0);
    }
};

您的用户仍然可以在输入文本框和文本区域中方便地使用空格键，同时，在未聚焦于文本元素时按空格键将不再导致页面滚动。

在幕后，滚动仍在进行。它只是以足够快的速度重置，以至于用户没有注意到。

如果将此值增加到 100 或 1000，它会让您更好地了解幕后发生的情况。您实际上会看到页面滚动，然后返回到之前的滚动位置。

这仅在 Chrome 和 Firefox 13 中进行了测试!因此，您可能需要在 Internet Explorer 等浏览器中将 setTimeout 持续时间(当前为 0)调整为不同的值。如有必要，请准备好优雅降级——仅在现代浏览器中支持此功能。

更新:

作为引用，以下是在主要浏览器中兼容的方法。它已在 Chrome、Firefox、IE8、IE9 和 Safari 中进行了测试。

虽然它可以在 IE8/IE9 中运行，但不是很流畅。

// put the eventhandler in a named function so it can be easily assigned
   // to other events.
function noScrollEvent(e) {
    e = e || window.event;
    if(e.keyCode == 32) {  
        setTimeout(                 
            (function(scrollval) { 
                return function() { 
                    $(document).scrollTop(scrollval);
                };
            })( $(document).scrollTop() ), 0);
    }
}


// Chrome and Firefox must use onkeydown
window.onkeydown = noScrollEvent;

// Internet Explorer 8 and 9 and Safari must use onkeypress
window.document.onkeypress = noScrollEvent;