[SOLVED] How make mouse, touch and keyboard events be handled with underlaying html?

Help & Support
1

I do not know how to enable/disable mouse, touch and keyboard events in my situation.
My situation is that I have a PlayCanvas that overlaps a html page.

When my game on the canvas is not active I would like that the mouse, touch and keyboard events are handeld by the underlaying html page.
But when my game is active, PlayCanvas should handle the events.

How can I do that?

To get a feeling of how things work I compared this:

const app = new pc.Application(canvas, {
    mouse: new pc.Mouse(canvas),
    touch: new pc.TouchDevice(canvas),
    keyboard: new pc.Keyboard(window),
    graphicsDeviceOptions: { alpha: true },
});

with this:

const app = new pc.Application(canvas, {
    //mouse: new pc.Mouse(canvas),
    //touch: new pc.TouchDevice(canvas),
    //keyboard: new pc.Keyboard(window),
    graphicsDeviceOptions: { alpha: true },
});

But in both cases the events are not passed to the html.
How can I make the events handled by the html?

2

The Canvas DOM is probably consuming pointer events. Look at pointer-events - CSS: Cascading Style Sheets | MDN and set the style for the canvas.

3

Sorry for the delay, but I had to work on other parts of the project. Now I’m back at this problem.

I tried this in the css:

canvas {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
}

But still no mouse events on the html layer underneath it.

4

Found it!
There where other layers in between. Setting them all to

pointer-events: none;

workes fine!