Ctrl + arrows is interpreted by the browser

Phaser 3
1

I’ve recently written a small game with Phaser 3 for the Ludum Dare (the game is playable at https://latcarf.itch.io/hidenrun).

One of the actions the player can do is to place a block, and I wanted to use the keybindings Ctrl+arrows for that, but even though it works for me (Chromium/Linux) it caused problems for several people, as apparently the Ctrl+arrows was captured by the browser and was causing the page to scroll or something like that. I then changed it to Shift+arrows, it fixed the problem for some people but someone reported that it still makes the window scroll on Egde.

Am I doing something wrong when trying to prevent the capture/propagation of such events or are such keybindings unavoidably going to interact with the browser?

Here is the relevant parts of my code (full code available at https://github.com/guillaumebrunerie/hidenrun):

create function of the scene, in lvl.js:

create ()
{
    var KeyCodes = Phaser.Input.Keyboard.KeyCodes;

    cursors = this.input.keyboard.addKeys({
        up:    KeyCodes.UP,
        down:  KeyCodes.DOWN,
        left:  KeyCodes.LEFT,
        right: KeyCodes.RIGHT,
        tab:   KeyCodes.TAB,
        space: KeyCodes.SPACE,
        shift: KeyCodes.SHIFT,
        ctrl:  KeyCodes.CTRL});

    […]
}

called by the update function of the scene, in player.js:

update (time, delta) 
{
    […]

    if (cursors.left.isDown)
        dx = -1;
    else if (cursors.right.isDown)
        dx = 1;
    else if (cursors.up.isDown)
        dy = -1;
    else if (cursors.down.isDown)
        dy = 1;

    if (dx != 0 || dy != 0)
    {
        if (cursors.ctrl.isDown || cursors.shift.isDown)
            this.putBlock(dx, dy, this.choice);
        else
            this.startMoving(delta, dx, dy);
    }

    […]
}
2

I think if you add something like this to the create() you can stop default behavoirs:

cursors.left.on(“down”, function(e){
e.preventDefault();
});