PIXI v7.1.2 EventSystem替代InteractionManager实现背景点击问题

直接给根舞台绑定事件并结合命中检测即可实现，完全基于PIXI事件系统，不用额外添加透明精灵或直接操作canvas：

• 开启根舞台（app.stage）的交互性
• 给舞台绑定pointerdown事件
• 在事件处理函数中，通过点击坐标的命中检测判断是否点击了背景

代码示例：

// 假设app是你的PIXI.Application实例
app.stage.interactive = true;
app.stage.on('pointerdown', (event) => {
  // 获取全局点击坐标，检测是否命中任何交互式元素
  const hitElement = app.stage.hitTest(event.data.global);
  if (!hitElement) {
    // 此处执行背景点击的逻辑
    console.log('点击了背景');
  }
});

这个方法的核心逻辑是：hitTest会遍历舞台上所有开启interactive的元素，只有当没有任何元素被命中时才返回null，刚好对应“背景点击”的场景。需要注意的是，确保你所有的交互式元素都正确配置了hitArea（未设置时PIXI会默认用纹理边界作为命中区域），避免出现误判。

内容的提问来源于stack exchange，提问作者Pierre