Geek asks and answers

Javascript prevents scrolling

I am trying to prevent scrolling when I use the arrow keys in my HTML5 game. This is a maze game that you control with the arrow keys or buttons on the screen, but whenever I press the up or down keys, it always scrolls. I use:

document.addEventListener('keydown', function(e){
    if(e.keyCode === 40) {
        down();
    } else if(e.keyCode === 38) {
        up();
    } else if(e.keyCode === 37) {
        leftclick();
    } else if(e.keyCode === 39) {
        rightclick();
    }
})

Is this possible with javascript? I want it to scroll with the mouse, but not when I use the arrow keys on the keyboard. My game is at http://thomaswd.com/maze . Please help. Thank!

0
source share
3 answers

Use e.preventDefault()to prevent normal key operation.

document.addEventListener('keydown', function(e){
    if(e.keyCode === 40) {
        down();
        e.preventDefault();
    } else if(e.keyCode === 38) {
        up();
        e.preventDefault();
    } else if(e.keyCode === 37) {
        leftclick();
        e.preventDefault();
    } else if(e.keyCode === 39) {
        rightclick();
        e.preventDefault();
    }

})

+2

:

document.addEventListener('keydown', function(e) {
        if(e.keyCode > 36 && e.keyCode < 41) {
            e.preventDefault();
        }
        if (e.keyCode === 40) {
            down();
        } else if (e.keyCode === 38) {
            up();
        } else if (e.keyCode === 37) {
            leftclick();
        } else if (e.keyCode === 39) {
            rightclick();
        }
        return false;
    }, false);
}
+1

Try adding e.preventDefault();at the end

0
source

More articles:


All Articles