How to define the order of mouse event handlers?

I have 2 objects in the scene, both can react to mouse event. But I want object A has higher priority than object B. If both receive mouse event, I want A to cancel B’s event handler.

Currently I’m using a Boolean in B’s script, such that when A sees the event, it set the Boolean to false. And this will causes B to skip event handling.

But how can I guarantee that B sees the event after A?

1 Like

Hi @wegfagweg,

What kind of objects are they? Are they UI Elements or regular 3D entities in thw world?

Here is my current demo

My use case:

As you can see, in the demo, mouse movement controls 2 things:

  1. it navigates the 3D scene, rotating and moving the camera

  2. once an object (the chair) is selected, the position of the object can be adjusted by dragging the mouse over the “pivot” (the x and y arrow).

So when a user drags the pivot, I should stop rotating the camera. Therefore, the pivot object has a higher priority than the camera to handle mouse movement .

The pivot and the camera both implements MouseMove event handler, but I don’t know who receives the event first?

I don’t know how I can define priority? (right now it works by coincidence I guess. )

Here is the project https://playcanvas.com/editor/project/660494

Nice graphics!

You can attach as many mouse event handlers to your scripts you like and they will all fire one after the other on each click. There isn’t a notion here as DOM elements have (parent/child, one on top of the other) since the mouse is a single entity firing events on the canvas window.

The Playcanvas engine catches those events and passes them to all listening scripts.

One thing that will help you gain control over this process is to use a single picking script. Right now you have two methods named doRayCast on two different scripts (cursor.js and selectable.js) that basically fire at the same time, both attempting to pick an object on the single same click.

So yes, there is some luck involved for this to be working :slight_smile:

What I propose is:

  1. Have a single script app-wide doing doRaycast over an array of pickable objects, on clicks.
  2. When an object is picked on click have a switch and act on it depending on its type (cursor or chair etc.)
  3. If you would like to have control over overlapping objects, since you aren’t using physics (to get the closest pick automatically) you only need to sort the pickable objects array by distance (closest -> furthest) prior doing the doRaycast picking.