Touch events preventDefault by default?

Help & Support
1

Hello,

does the canvas html element created by the PlayCanvas engine swallow all touch events by default when run on mobile?

I’ve searched the export of a project for “preventDefault” - the only place it is used is the engine js file.

The problem that arises from this is that it’s impossible to scroll the page on mobile devices where the canvas is. In my case, the playcanvas scene is the first block of a long page and is in full screen size on mobile which blocks touch scrolling of the page.

My temporary solution is to set the css property ‘pointerEvents’ to ‘none’ but ideally I’d like to handle horizontal touch movement in the PlayCanvas scene and pass the event to the browser when vertical touch movement is detected so that my scene can be interactive but not blocking page scrolling on mobile devices.

I guess this should be a PlayCanvas scene setting that regulates the default behaviour of touch input like a checkbox named ‘prevent default’ in the input section of the settings panel.

Please let me know if I got something wrong or am missing something and whether my assumptions are correct or not.

Thank you very much!

2

I’m not too familiar with the browser events here so bear with me:

The mouse and touch event handlers are pretty simple: engine/mouse.js at main · playcanvas/engine · GitHub

It fires an internal event and passes the raw browser event as a property so the user can choose what to do with it. AFAIK, the engine doesn’t actively consume the browser event via calling preventDefault

I do wonder if this is a ‘by default’ the canvas (or iframe) HTML elements consumes events because it’s in focus by the input?

From what I’ve seen online, people are having to use pointer events to stop a canvas from preventing things like dragging etc.