Javascript PIXI JS优先级调用鼠标悬停事件

当我们创建多个精灵时，当hitArea多边形中的任何悬停时调用函数mouseover。无论是否应用于其他对象

精灵的可见性由数组排序控制。在舞台上，越晚的加入到精灵中。孩子们，它会越高。下面是一个示例，其中一个矩形叠加在另一个矩形上。同时，当我们把东西放在底部精灵的左上角时，在对象函数mouseover的顶部将调用mouseover，尽管它在另一个下面

如何解决这个问题？HIT区域不适合，因为设施会不断拖拉

提前感谢您的回复

var stage = new PIXI.Stage(0x97c56e, true);
var renderer = PIXI.autoDetectRenderer(window.innerWidth,         window.innerHeight, null);

document.body.appendChild(renderer.view);
renderer.view.style.position = "absolute";
renderer.view.style.top = "0px";
renderer.view.style.left = "0px";
requestAnimFrame( animate );

var texture = new PIXI.RenderTexture()
r1 = new PIXI.Graphics()
r1.beginFill(0xFFFF00);
r1.drawRect(0, 0, 400, 400)
r1.endFill()
texture.render(r1);

var texture2 = new PIXI.RenderTexture()
r1 = new PIXI.Graphics()
r1.beginFill(0xDDDD00);
r1.drawRect(0, 0, 300, 300)
r1.endFill()
texture2.render(r1);

createBunny(100, 100, texture)
createBunny(120, 120, texture2)

function createBunny(x, y, texture) {

    var bunny = new PIXI.Sprite(texture);
    bunny.interactive = true;
    bunny.buttonMode = true;
    bunny.anchor.x = 0.5;
    bunny.anchor.y = 0.5;

    bunny.scale.x = bunny.scale.y = 0.5;

    bunny.mouseover = function(data) {
        console.log('mouse over!')
    }

    bunny.mousedown = bunny.touchstart = function(data) {
        this.data = data;
        this.alpha = 0.9;
        this.dragging = true;
        this.sx = this.data.getLocalPosition(bunny).x * bunny.scale.x;
        this.sy = this.data.getLocalPosition(bunny).y * bunny.scale.y;      
    };

    bunny.mouseup = bunny.mouseupoutside = bunny.touchend = bunny.touchendoutside = function(data) {
        this.alpha = 1
        this.dragging = false;
        this.data = null;
    };

    bunny.mousemove = bunny.touchmove = function(data) {
        if(this.dragging) {
            var newPosition = this.data.getLocalPosition(this.parent);
            this.position.x = newPosition.x - this.sx;
            this.position.y = newPosition.y - this.sy;
        }
    }

    bunny.position.x = x;
    bunny.position.y = y;

    stage.addChild(bunny);
}

function animate() {
    requestAnimFrame( animate );
    renderer.render(stage);
}

---

我知道这是一个老话题，但是对于那些来到这个页面的人来说，这个问题可以通过扩展PIXI的Sprite类来解决，请看下面的代码

PIXI.Sprite.prototype.bringToFront = function() {
    if (this.parent) {
        var parent = this.parent;
        parent.removeChild(this);
        parent.addChild(this);
    }
}

并在mousedown事件中调用上述方法，如下所示

this.bringToFront();

工作桥