Can't get wheel when mouse is locked in Chrome

[ecj2]

If the mouse is not focused on the canvas, even if the mouse is locked to the canvas, Momo.getMouseWheel() will not work in Chrome.

Observe the following:

Momo.setEntryPoint(

  () => {

    Momo.initialize("example", 480, 360);

    Momo.useMouse();

    let font = Momo.loadFontFace("Arial");

    let counter = 0;

    Momo.getCanvas().addEventListener("click", () => {

      Momo.lockMouse();
    });

    Momo.createGameLoop(

      () => {

        // Update.

        if (Momo.getMouseWheel() > 0) {

          ++counter;
        }
        else if (Momo.getMouseWheel() < 0) {

          --counter;
        }
      },

      () => {

        // Render.

        Momo.clearToColor(Momo.makeColor(255, 255, 255));

        let text = `Counter: ${counter} MX: ${Momo.getMouseX()} MY: ${Momo.getMouseY()}`;

        Momo.drawText(font, Momo.makeColor(0, 0, 0), 25, 0, 0, "left", text);
      }
    );
  }
);

Then above draws black text on a white background which lists the value of a counter and the mouse's coordinates relative to the canvas. When the mouse wheel is scrolled, counter gets incremented or decremented depending on the scroll direction.

In Chrome, counter will not change if the mouse's coordinates fall outside of (0, 0) - (canvas width, canvas height). It works as expected in Firefox, however.

[ecj2]

Attaching the wheel event listener to document rather than the canvas would fix this issue, but would prevent the rest of the document from scrolling, making that solution less than ideal.