Different behavior of app.touch and app.mouse

Help & Support
1

Hello,
while programming I noticed that the touch events and mouse events registered with the engine functions behave different from each other:

We have a project, where we overlay a div over the entire application, we throw our GUI(html) into this div and since we want our GUI to always be on top of the application, this div has a higher z-index as the application-canvas. This div is 100vw wide and 100vh heigh.

We set up our input script as follows:

        if(this.app.touch)
        {
            console.log("TOUCH ACTIVE");
            this.app.touch.on(pc.EVENT_TOUCHSTART, this.onTouchDrag, this);
            this.app.touch.on(pc.EVENT_TOUCHEND, this.onTouchDragStop, this);
            this.app.touch.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
        }

        // Disables the context menu in the browser
        this.app.mouse.disableContextMenu();    

        // Register mouse events
        this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onDrag, this);
        this.app.mouse.on(pc.EVENT_MOUSEUP, this.onDragStop, this);
        this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMove, this);
        this.app.mouse.on(pc.EVENT_MOUSEWHEEL, this.onScroll, this);

There is no problem at all with the mouse events, they work out of the box just as expected, however, the touch events are blocked by the overlaying div.
This makes the implementation somewhat inconsistent as the mouse events do not rely on the application-canvas to be actually clicked, but the touch events require the canvas to be touched.

Is there a way to change this?

Here is an example project showcasing what I mean: Example Project

2

– Push –
Hey, it’s been a few days and we’re basically waiting upon a response on this…
I mean we can of course make our own event listeners which would be linked to the div overlaying the canvas,
but if this is something you guys would consider changing, it would be more consistent for us to keep the implementation of the engine touch-events…

Could any of the devs maybe give a quick statement as of if this is something you would consider changing?

3

There is a quick way for you to fix this by doing

this.app.touch = new pc.Touch(window)

We will look into fixing this inconsistency but no ETA yet :slight_smile:

1 Like
4

Hi @vaios, I tried to put that piece of code into place, but I seem to be doing something wrong:
I tried to place it before I register the touch events still within the if clause as well as at the very beginning of the initialize function.

The error I get is: pc.Touch is not a constructor

5

I believe I just found the solution:

Instead of creating a new pc.Touch I tried creating a new pc.TouchDevice, which does work as far as I can tell so to conclude this thread the final code is:

if(this.app.touch)
{
    console.log("TOUCH ACTIVE");
    this.app.touch = new pc.TouchDevice(window);
    this.app.touch.on(pc.EVENT_TOUCHSTART, this.onTouchDrag, this);
    this.app.touch.on(pc.EVENT_TOUCHEND, this.onTouchDragStop, this);
    this.app.touch.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
}
2 Likes
6

Ah yes sorry it should be pc.TouchDevice :slight_smile:

7

@vaios Funny enough two years later I ran into the same issue again :sweat_smile: guess this probably slipped under the table - I mean with the fix above it’s not such a big issue but do you think it’s still something that should change in the future?

8

Hi,

I’m not sure if this is going to be changed as it’s potentially high risk. We’ll let you know if it does however!