bug: enter/leave pointer events cannot be cancelled on overlapping actors

[eonarheim]

Discussed in #3058

^{Originally posted by spustlik May 12, 2024}
Hi,
than you for you effort in exceliburjs, it is fantastic framework.

I am at the beginning and trying to use actor pointer events, but in my scene there are overlapping actors (using z-index).

But with no luck - in some configuration events are fired on all actors (if pointerenter or pointerleave), or pointerleave is not called when moving from back actor to front actor.CAncelling event doesn't help.
This is my code:

class TestScene extends ex.Scene {
    onInitialize(game: ex.Engine) {
        super.onInitialize(game);
        let a = this.addActor(ex.vec(100, 100));
        a.z = 10;
        let b = this.addActor(ex.vec(130, 130));
        b.z = 20;
    }
    private addActor(pos: ex.Vector) {
        let a = new ex.Actor({ width: 200, height: 100, pos: pos, anchor: ex.vec(0, 0), opacity: 0.8 });
        let r = new ex.Rectangle({ width: a.width, height: a.height, strokeColor: ex.Color.Green, lineWidth: 5, color: ex.Color.Red });
        a.graphics.use(r);
        this.add(a);
        a.pointer.useGraphicsBounds = true;
        a.events.on('pointermove', (ev) => {
            r.color = ex.Color.Black;
            ev.cancel();
        });
        a.events.on('pointerleave', (ev) => {
            r.color = ex.Color.Red;
        });
        a.events.on('pointerdown', (ev) => {
            console.log('pointer down on ' + a.id);
            ev.cancel();
        });
        return a;
    }
}

what i am doing wrong? Or how to achieve clicking and moving on actors, but only on topmost?
Thank you for any advice, Jan </div>