PixiJS中UI层遮挡游戏层，鼠标事件无法透传至底层问题求助

你当前的代码逻辑完全搞反了：stopPropagation、stopImmediatePropagation是阻止事件向上冒泡，但UI层在游戏层上方，事件首先被UI层捕获，游戏层根本没机会拿到事件，这些代码自然没用。下面分两种场景给你解决方案：

场景1：UI层整体无需交互（仅透明覆盖） #

如果UI层只是纯展示、没有可点击元素，直接让UI层不拦截指针事件：

• 若用PIXI.js这类Canvas游戏框架：给UI容器设置interactive = false

  ui.interactive = false;
  

• 若UI层是DOM元素：给UI层加CSS样式

  .ui-layer {
    pointer-events: none;
  }
  

这样所有指针事件会直接穿透到下层的游戏层。

场景2：UI层有部分可交互元素，其余区域需要透传 #

如果UI层里有按钮、输入框这类需要交互的元素，只有空白透明区域需要透传事件：

方案（PIXI.js为例） #

1. 先让UI容器开启交互，并设置全屏点击区域
2. 在点击事件里判断是否命中UI内的交互元素，没命中则手动把事件派发给游戏层

ui.interactive = true;
ui.hitArea = new PIXI.Rectangle(0, 0, window.innerWidth, window.innerHeight);

ui.on('pointerdown', (e) => {
  // 查找点击位置下的UI交互元素
  const hitTarget = ui.getObjectsUnderPoint(e.data.global.x, e.data.global.y).find(item => item.interactive);
  if (!hitTarget) {
    // 没命中UI元素，触发游戏层的点击事件
    gameLayer.emit('pointerdown', e);
  }
  // 命中UI元素的话，正常处理即可，无需额外操作
});

方案（DOM+Canvas组合） #

给UI层设置pointer-events: none，然后给内部需要交互的元素单独开启：

.ui-layer {
  pointer-events: none;
}

.ui-layer .button, .ui-layer .input {
  pointer-events: auto;
}

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