How to pass all events through html element to canvas except click?

Questions
, , , ,
1

I have a canvas with the BabylonJS app.
Above the canvas I draw html buttons with absoulte positions. (parent of buttons with pointer-events: none, and every button with auto). Position of buttons links to some 3d scene mesh projections so them moved as I move the camera.
Clicks by buttons are working good, but I want to pass through them events like drag to interact with the scene.

I found two solutions: with pointer-events none and document.elementFromPoint. Could someone advice some better decision?

image
image703×824 57.1 KB

2

cc @RaananW :slight_smile: who is the king of web

3

Those are the two methods to do is, when the elements are absolute-positioned not as a child of your canvas. This way pointer events will bubble to the parent (unless you decide to stop them). I haven’t tried it though; this is just a thought experiment :slight_smile:

Otherwise, you can play dynamically with pointer-events auto and none, if all you need is a pointer down on the button, set the pointer-events of the button to none right after pointer down, and reset that behavior on every pointer up on the babylon canvas. You might need to emulate a pointer down events in the babylon scene to be sure it is working as expected (which is, BTW, another way of doing it - use the emulate pointer functions in the babylon scene).

4

Thanks!
Currentrly I make pointer-events: none for buttons and events smth like this:

scene.onPointerObservable.add(pointerInfo => {
  if (pointerInfo.type === PointerEventTypes.POINTERDOWN) {
     const elms = document.elementsFromPoint(pointerInfo.event.x, pointerInfo.event.y);
     ....
  }
})