禁用一个键，此JavaScript代码还会影响其他按键事件吗? [英] Will this JavaScript code affect other keypress events too by disabling one key?

问题描述

我正在使用它来禁用空格键在浏览器中的滚动"效果.这也会影响其他按键事件吗?

I'm using this to disable the 'scrolling' effect the spacebar has in a browser. Will this affect other keypress events too?

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

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

Could someone please explain what this is doing? I'm not sure if this code is bad, but it seems to disable other keypress related codes in my page, and I want to make sure this isn't the reason.

谢谢！

推荐答案

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

ASCII code 32 is the ASCII value that represents the spacebar key, and your code is essentially telling the browser to return false whenever that keycode is detected. Since false is returned, the scrollbar effect you speak of is in fact successfully disabled.

但是，此便捷的空格键滚动禁用功能的不幸副作用是，它会在页面上的所有位置禁用空格键按键.

However, the unfortunate side effect of this convenient spacebar-scroll-disabling function is that it disables spacebar keypresses everywhere on the page.

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

Instead of returning false, if the keycode is detected, pass the current scrollTop value into a closure that returns a function to a setTimeout event. When the setTimeout fires, the scrollTop position is reset back to the value it was in when the setTimeout event was first registered.

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

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

Your users can still conveniently make use of spacebars in input textboxes and textareas, and at the same time, pressing the spacebar key while not focused on a text element will no longer result in the page scrolling.

在引擎盖下，滚动仍在进行.只是以足够快的速度将重置到用户不知道的地方.

Under the hood, the scroll is still taking place. It's just being reset at a rate fast enough to where the user doesn't notice.

如果将此值增加到100或1000，则可以更好地了解引擎盖下的情况.实际上，您将看到页面滚动，然后将其设置回上一个滚动位置.

If you increase this value to 100 or 1000, it will give you a better idea of what is going on under the hood. You'll actually see the page scroll and then get set back to the previous scroll position.

这仅在Chrome和Firefox 13中进行了测试！因此，您可能必须在Internet Explorer之类的浏览器中将setTimeout持续时间(当前为0)调整为其他值.如有必要，请准备好以适当的方式降级-通过仅在现代浏览器中支持此功能.

This was only tested in Chrome and Firefox 13! So you may have to adjust the setTimeout duration -- currently 0 -- to a different value in browsers like Internet Explorer. Be prepared to gracefully degrade -- by supporting this feature only in modern browsers -- if necessary.

更新:

作为参考，以下是用于使其在主要浏览器中兼容的方法.已在Chrome，Firefox，IE8，IE9和Safari中进行过测试.

For reference, below is the method to use to make this compatible in the major browsers. It has been tested in Chrome, Firefox, IE8, IE9, and Safari.

虽然它可以在IE8/IE9中正常运行，但并不是很流畅.

While it does work in IE8/IE9, it isn't very smooth.

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

这篇关于禁用一个键，此JavaScript代码还会影响其他按键事件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！