互动

PixiJS 首先是一个渲染系统，但它还支持交互。为项目添加对鼠标和触摸事件的支持是一项简单且一致的任务。

事件模式

用于替换 v6 中的 InteractionManager 的新事件系统扩展了一个容器交互性的定义。因此我们引入了 eventMode，允许你控制对象如何响应交互事件。这类似于 v6 中的 interactive 属性，但选项更多。

事件模式	说明
none	忽略所有交互事件，类似于 CSS 中的 pointer-events: none，对于非交互式的子对象，这是一个很好的优化
passive	不发送事件，并且忽略自身的击中检测，但允许事件和击中检测只发生在其交互式的子对象中。这是所有容器的默认事件模式
auto	不发送事件，但如果父级是交互式的，则会命中检测。与 v7 中的 interactive = false 相同
static	发送事件并且进行击中检测。与 v7 中的 interaction = true 相同，适用于诸如按钮之类的不会移动的对象。
dynamic	发送事件并且进行击中检测，但还将从计时器接收模拟互动事件，以便在鼠标未移动时进行互动。这对于独立移动或动画的元素很有用。

事件类型

PixiJS 支持以下事件类型

事件类型	说明
pointercancel	在注册 pointerdown 的显示对象外部释放指针设备按钮时触发。
pointerdown	在显示对象上按下指针设备按钮时触发。
pointerenter	当指针设备进入显示对象时触发。
pointerleave	当指针设备离开显示对象时触发。
pointermove	当指针设备在显示对象上移动时触发。
globalpointermove	无论对当前对象执行命中测试，当指针设备移动时触发。
pointerout	在将指针设备从显示对象移开时触发。
pointerover	当将指针设备移到显示对象上时触发。
pointertap	当在显示对象上双击指针设备时触发。
pointerup	在显示对象上释放指针设备按钮时触发。
pointerupoutside	在注册 pointerdown 的显示对象外部释放指针设备按钮时触发。
mousedown	在显示对象上按下鼠标按钮时触发。
mouseenter	当鼠标光标进入显示对象时触发。
mouseleave	当鼠标光标离开显示对象时触发。
mousemove	当鼠标光标在显示对象上移动时触发。
globalmousemove	无论对当前对象执行命中测试，当鼠标移动时触发。
mouseout	在将鼠标光标从显示对象移开时触发。
mouseover	当将鼠标光标移到显示对象上时触发。
mouseup	在显示对象上释放鼠标按钮时触发。
mouseupoutside	在最初注册 mousedown 的显示对象外部释放鼠标按钮时触发。
click	在显示对象上单击（按下并释放）鼠标按钮时触发。
touchcancel	在注册 touchstart 的显示对象外部移除触点时触发。
touchend	从显示对象中移除触点时触发。
touchendoutside	在注册 touchstart 的显示对象外部移除触点时触发。
touchmove	当触点沿显示对象移动时触发。
globaltouchmove	无论对当前对象执行命中测试，当触点移动时触发。
touchstart	将触点放置在显示对象上时触发。
tap	当在显示对象上双击触点时触发。
wheel	当在显示对象上旋转鼠标滑轮时触发。
rightclick	在显示对象上单击（按下并释放）鼠标右键时触发。
rightdown	在显示对象上按下鼠标右键时触发。
rightup	在显示对象上释放鼠标右键时触发。
rightupoutside	在注册 rightdown 的显示对象外部释放鼠标右键时触发。

启用交互

任何容器派生对象（Sprite、Container 等）只需将其实体 eventMode 设为上面列出的任何事件模式，即可变得具有交互性。这样做将使得该对象发出交互事件，相应地可以对此类事件作出回应，以便驱动项目的行为。

查看交互示例代码。

要响应点击和轻击，需绑定到对象上触发的事件，如下所示

let sprite = Sprite.from('/some/texture.png');
sprite.on('pointerdown', (event) => { alert('clicked!'); });
sprite.eventMode = 'static';

查看 Container，了解所支持的交互事件列表。

检查对象是否具有交互性

你可以通过调用 isInteractive 属性来检查一个对象是否具有交互性。如果 eventMode 被设为 static 或 dynamic，它将返回 true。

if (sprite.isInteractive()) {
    // sprite is interactive
}

使用指针事件

PixiJS 支持三种类型的交互事件 - 鼠标、触控和指针。鼠标事件由鼠标移动、点击等触发。触控事件是为触控设备触发的。指针事件是为这两者同时触发的。

这意味着，在许多情况下，你可以编写项目以使用指针事件，而项目在使用鼠标或触控输入时都能正常工作。因此，使用非指针事件的唯一原因是基于输入类型支持不同的操作模式，或支持多触控交互。在其他所有情况下，优选使用指针事件。

优化

击中测试需要遍历整个对象树，这在复杂的项目中可能成为优化瓶颈。为了缓解这个问题，PixiJS Container 派生对象有一个名为 interactiveChildren 的属性。如果你有 Container 或其他具有复杂子树的对象，并且你知道它们永远不会具有交互性，你可以将此属性设为 false，这样在检查悬停和点击事件时，击中测试算法将跳过这些子树。举例而言，如果你正在创建一个横向卷轴游戏，你可能想为包含岩石、云、花等元素的背景层设置 background.interactiveChildren = false。这么做将显著加快击中测试，原因是背景层中不可点击的子对象数量很多。

还可以自定义 EventSystem 以提高性能

const app = new Application({
    eventMode: 'passive',
    eventFeatures: {
        move: true,
        /** disables the global move events which can be very expensive in large scenes */
        globalMove: false,
        click: true,
        wheel: true,
    }
});