javascript - 一旦在用户浏览器中禁用箭头键滚动，如何启用它

Question

在用户浏览器中禁用箭头键滚动 Zeta 给出了如何禁用箭头键的正确答案。

一旦禁用，我需要重新启用箭头键导航。

$('main navigation').has('drop down').bind('keyup', function (e) {
    if (e.keyCode == 40) {hover(e,$(this));} //Down Arrow Key press, how mega menu
    if (e.keyCode == 38) {unhover(e);} //Up Arrow Key Press, hide mega menu
    if (e.keyCode == 9) {checkTab();} //check if tab pressed
}

var checkTab = function (){
        // i check, if tab focus to the main menu anchor
    if($('main navigation').is(':focus')){
        var keys = [];
        window.addEventListener("keydown",
            function(e){
                keys[e.keyCode] = true;
                switch(e.keyCode){
                    case 37: case 39: case 38:  case 40: // Arrow keys
                    case 32: e.preventDefault(); break; // Space
                    default: break; // do not block other keys
                }
            },
        false);
        window.addEventListener('keyup',
            function(e){
                keys[e.keyCode] = false;
            },
        false);             
        console.log('focused')
    }
    else {
        console.log('f out')    
    }                   
}

这工作正常，但因为我有绑定 window.event 禁用。一旦禁用我无法启用。在这一点上需要帮助。

Answer 1

您可以使用 Jquery on/off 来解决这个问题。

首先像这样附加keydown..

$('window').on('keydown', function(){
        //Your Function Here
        });

然后分离，这样做......

$('window').off('keydown');

Answer 2

使用另一个变量来确定您当前是否应该阻止箭头键：

var useArrowKeysToScroll = false;

/* ... */
function(e){
    keys[e.keyCode] = true;
    if(!useArrowKeysToScroll && 
           ((e.keyCode >= 37 && e.keyCode <= 40) || 
             e.keyCode == 32)){
        e.preventDefault();
    }
    /* handle other keys etc... */
}, /* ... */

如果useArrowKeysToScroll为假，则箭头键和空格键不会导致滚动。