禁用用户浏览器中的箭头键滚动

时间:2012-01-18 20:02:27

标签: javascript canvas scroll arrow-keys

我正在使用canvas和javascript制作游戏。

当页面长于屏幕(评论等)时,按向下箭头会向下滚动页面,使游戏无法播放。

当玩家想要向下移动时,我该怎么做才能防止窗口滚动?

我猜Java游戏,等等,这不是问题,只要用户点击游戏即可。

我尝试了来自How to disable page scrolling in FF with arrow keys的解决方案,但我无法让它发挥作用。

3 个答案:

答案 0 :(得分:136)

摘要

简单prevent the default浏览器操作:

window.addEventListener("keydown", function(e) {
    // space and arrow keys
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);

原始答案

我在自己的游戏中使用了以下功能:

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

神奇发生在e.preventDefault();。这将阻止事件的默认操作,在这种情况下移动浏览器的视点。

如果您不需要当前按钮状态,则只需删除keys,然后放弃箭头键上的默认操作:

var arrow_keys_handler = function(e) {
    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
    }
};
window.addEventListener("keydown", arrow_keys_handler, false);

请注意,如果您需要重新启用箭头键滚动,此方法还允许您稍后删除事件处理程序:

window.removeEventListener("keydown", arrow_keys_handler, false);

参考

答案 1 :(得分:2)

为了可维护性,我会附上"阻止"元素本身的处理程序(在您的情况下,画布)。

window.event.preventDefault()

为什么不简单地window.eventMDN州:

  

start = datetime.datetime(2010, 1, 1) end = datetime.datetime(2017,1,1) for ticker in TICKERS: f = dr.DataReader(ticker, 'yahoo', start, end) 是Microsoft Internet Explorer的专有属性   只有在调用DOM事件处理程序时才可用。它的   value是当前正在处理的Event对象。

进一步阅读:

答案 2 :(得分:0)

我已经尝试了当按下箭头键时(jQuery和本机Javascript)阻止滚动的不同方法-它们在Firefox中都可以正常工作,但在最新版本的Chrome中不起作用。
甚至推荐使用Media的显式intro = ImageClip(r'D:\skrooby\Vanity\timestamp.png', duration=3) intro.set_audio(r'D:\skrooby\introsong.mp3') outro = ImageClip(r'D:\skrooby\Vanity\continue.png', duration=20) outro.set_audio(r'D:\skrooby\outrosong.mp3') 属性作为唯一可行的解​​决方案,例如here

最后,经过多次尝试,我找到了一种适用于Firefox和Chrome的方法:

{passive: false}

MDN报价window.addEventListener

选项可选
选项对象指定有关事件侦听器的特征。可用的选项是:

捕获
一个window.addEventListener('keydown', (e) => { if (e.target.localName != 'input') { // if you need to filter <input> elements switch (e.keyCode) { case 37: // left case 39: // right e.preventDefault(); break; case 38: // up case 40: // down e.preventDefault(); break; default: break; } } }, { capture: true, // this disables arrow key scrolling in modern Chrome passive: false // this is optional, my code works without it }); ,指示此类型的事件将被分派到已注册的EventTarget.addEventListener(),然后才被分派到DOM树中其下方的任何Boolean
一次
...
被动
如果为listener,则表示为EventTarget指定的函数将永远不会调用Boolean。如果被动侦听器确实调用了listener,则用户代理将不执行任何操作,只生成控制台警告。 ...