PixiJS 6.2.0 交互监听器不触发 仅pointerupoutside事件生效

问题核心原因分析 #

你遇到的现象（仅pointerupoutside可触发）本质是指针按下时系统判定命中了当前元素，但是按下后的后续事件判定为脱离了元素碰撞区域，90%以上的概率是手动设置的hitArea坐标与图形实际渲染的坐标不匹配导致的碰撞区域错位。

排查解决步骤 #

步骤1：删除冗余的hitArea配置 #

PIXI.Graphics本身会自动根据绘制内容计算碰撞边界，无需手动设置hitArea，多余的配置极易出现坐标偏差，先删除以下代码测试：

buttonTexture.hitArea = new PIXI.Circle(buttonX, buttonY, buttonWidth * 0.8);

步骤2：规范图形绘制的坐标写法 #

不推荐直接在drawCircle中传入全局/父级坐标，容易和显示对象本身的position属性叠加导致坐标混乱，建议调整为「显示对象定位+本地原点绘制」的写法：

const button = new PIXI.Graphics();
button.beginFill(0xff0000);
// 在图形自身的本地坐标系原点绘制
button.drawCircle(0, 0, buttonWidth * 0.8);
button.endFill();
// 直接设置图形的全局定位
button.x = buttonX;
button.y = buttonY;
button.interactive = true;
button.buttonMode = true;

// 事件绑定逻辑不变
button.on('pointerdown', (e) => console.log(e));
button.on('pointerup', (e) => console.log(e));
button.on('pointerupoutside', (e) => console.log(e));
button.on('pointerover', (e) => console.log(e));
button.on('pointerout', (e) => console.log(e));
this.pixi.app.stage.addChild(button);

步骤3：检查交互坐标匹配问题 #

如果调整坐标后问题仍存在，检查以下配置：

• 确认Canvas元素没有设置CSS缩放属性，如果有缩放需求，初始化PIXI实例时开启适配配置：

const app = new PIXI.Application({
  width: 渲染宽度,
  height: 渲染高度,
  resolution: window.devicePixelRatio,
  autoDensity: true, // 自动同步Canvas的CSS尺寸与渲染尺寸
})

• 确认所有父容器没有错误设置interactive=true拦截事件，也没有将interactiveChildren设为false阻断事件向下传递
• 临时添加stage全局事件监听，确认点击时命中的目标是否正确：

this.pixi.app.stage.on('pointerdown', (e) => {
  console.log('点击命中目标：', e.target)
})

如果输出的目标不是你创建的圆形，说明存在你视觉上不可见的透明交互元素遮挡，可通过遍历stage子元素排查interactive=true的隐藏元素。

步骤4：兼容验证 #

如果以上步骤都无法解决，可以将pointer事件替换为mouse事件测试，排除设备指针事件兼容问题：
将pointerdown替换为mousedown，pointerup替换为mouseup，pointerover替换为mouseover，pointerout替换为mouseout。

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