onMouseOut event and click

Help & Support
1

Hello,

I am using something like this to orbit around a point:

context.mouse.on(pc.input.EVENT_MOUSEMOVE, this.onMouseMove, this);

        onMouseMove: function (event) {
            if (event.buttons[pc.input.MOUSEBUTTON_LEFT]) {
                this.orbit(event.dx * 0.2, event.dy * 0.2);
            }
        }

When the mouse exits the PlayCanvas iframe while orbiting, naturally the orbit stops (no mousemove on iframe event), but when the mouse re-enters the iframe, the orbiting continues. Although the mouse isn’t clicked.

It is like the click event isn’t canceled when the mouse leaves the iframe. I don’t know if this is the expected behavior but I haven’t found a way to work around that.

Any ideas?

2

It is general problem with mouse events in browsers.
You will get mousemove events any time there is actual movement, but I wouldn’t rely on event.buttons.

What is better to do is to keep state value in script orbiting, and then on mousedown mark that flag to true.
On mouseleave or mouseup mark that flag to false. There are few more events to worry about, such as tab switching or visibility api, etc.

Then in mousemove handler check if state is orbiting, then apply orbit, otherwise do nothing.
That will handle case with mouse going out of iframe.

Another thing to worry about, is the fact that DOM elements are selectable. Double mouse clicks and dragging through text - can be very annoying when it is not desired to select elements or content within them.
Css helps in this case, check this thread about this: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting?answertab=votes#tab-top

3

On mouseleave or mouseup mark that flag to false

What is the recommended way of setting up the mouseleave event in PlayCanvas?

There doesn’t seem to be a built in event for it, like there is for eg app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);

4

The ‘built in’ events are really just strings for the generic Javascript Events. Just use ‘mouseleave’ as the name of the event.

5

I tried both of these, and the onMouseLeave function isn’t being called.

app.mouse.on(“mouseleave”, this.onMouseLeave, this); //not working
app.on(“mouseleave”, this.onMouseLeave, this); //not working
app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this); //is working

6

For anyone looking for working code, try this…

var MyAppName = function (entity) {
    this.entity = entity;   
    var orbiting = false;  // This is where you define your orbiting state
    document.addEventListener ("mouseout", this.onMouseLeave);  // When the mouse leaves the document, the function will be fired

and then…

onMouseLeave: function(event) {
    mouseDragging = false;  // Note that this.mouseDragging is not used
}

Enjoy!