Input Event Handling cannot be stopped from bubbling

[johannes-z]

Hello! I've been trying out excalibur.js a little over last few days, but hit a problem with event handlers I couldn't figure out using the docs and github issues.

I implemented drag&drop panning in the scene (think grand strategy game), using https://excaliburjs.com/docs/pointers/#event-handlers. In that scene I render an actor that has a click handler pointerdown like this: https://excaliburjs.com/docs/pointers#handling-pointer-events-on-actors. However, there is no way to stop that event from bubbling up to the scene, so the event handler for drag&drop panning also always fires. I tried evt.nativeEvent.stopPropagation() etc., but it didn't change anything.

Thanks!

[eonarheim]

Hi @johannes-z! Good question! Can you post a code example as well?

Unfortunately using the nativeEvent.stopPropagation() wont work in this case because excalibur collects up native events and emits synthetic excalibur events during the frame lifecycle, so by the time you get the native event it's too late.

I think you might be right, I'm looking at the pointer system source code and it is possible to do event.cancel() to prevent pointer event tunneling to other actors. But there isn't a way to to stop the top level event on the pointer as far as I can tell right now. I do think this should work I'm going to dig in and make a bug around this with my findings.

One workaround might be to manually inspect whether the event has been canceled? It is my thought this should ultimately happen automatically...

actor.on('pointerdown', (pe: ex.PointerEvent) => {
  console.log('select actor');
  pe.cancel(); // cancel the event
});


game.input.pointers.primary.on('down', (e) => {
  if (!e.active) {
    console.log('canceled', e);
  }
});

[johannes-z]

Yes this seems to work. I didn't post any code cause it doesn't really exceed what's in the docs, but for completeness sake I'll post what I have. calling evt.cancel() and checking evt.active in the global handler seems work. I'm just worried this might cause issues later when I need to check on('cancel'). In any case, I feel like the engine event handler shouldn't be called.

import { Color, DisplayMode, Engine, PointerScope, Actor, Circle, vec } from 'excalibur'

export class Star extends Actor {
  constructor(config?: ActorArgs) {
    super({
      z: 100,
      ...config,
    })

    this.graphics.use(new Circle({
      radius: 10,
      color: Color.Yellow,
    }))

    this.pointer.useGraphicsBounds = true

    this.on('pointerdown', (evt) => {
      console.log('Clicked!')
      console.log(evt)
      evt.cancel()
    })

    return this
  }
}

const game = new Engine({
  canvasElementId: 'game',
  displayMode: DisplayMode.FillContainer,
  backgroundColor: Color.Black,
  pointerScope: PointerScope.Document,
})

game.input.pointers.on('down', async (evt) => {
  console.log('down')
  console.log(evt.active)
  console.log(evt)
})

const star = new Star({
  pos: vec(100, 0),
})
game.add(star)

game.start()

[eonarheim]

Awesome, this should be an easy bugfix if I'm reading the excalibur code right. I've made an issue! #3250

[eonarheim]

@johannes-z PR merged! should be deployed in the alpha bits soon