pixiJS 忽略鼠标事件

Question

我有一个 UI 层和一个 Game 层。 UI 层透明地落在游戏层上。 当我单击游戏层内的精灵时。 我没有收到事件。 我希望事件也到达底层。 我尝试了这些代码，但没有用。

        ui.on('pointerdown',e=>{
        e.preventDefault()
        e.stopPropagation()
        e.stopImmediatePropagation()
    })

Answer 1

非常确定，当 interactive 属性设置为 true 的容器重叠时，避免触发多个事件是 Pixij 的一个限制。它只会触发前台容器上的事件（最后一个添加到舞台上的容器）。

您可以通过为 UI 元素创建 PIXI.Graphics 并将 alpha 设置为 0 并将 interactive 设置为 true 来解决此问题，或者创建整个交互式元素层并检查元素之间的重叠。

编辑： 我仍然不明白您想要完成什么，您可能需要重新考虑您的项目。

实现此目的的另一种方法是忽略交互属性，在整个文档上添加单击事件，并检查容器中哪个容器实现了您编写的 IClickable 接口，然后检查指针位置是否与交互重叠您为每个容器手动计算的面积。然后，您可以为指针下的所有精灵触发一个事件，即使它们彼此重叠。

Answer 2

借助 pixi.js v7+ 中的新功能，您可以使用 EventBoundary 来实现您的目标。 只需接收UI层发送来的这些事件，并将其转发到Game层，代码如下： const border = new PIXI.EventBoundary(GameLayerRoot); [ '指针向下', '指针向上', '指针移动', '指针', '指针', '车轮'， ].forEach((事件) => { UIArea.addListener(event, (e) => border.mapEvent(e)); });