pixijs-events
Use this skill when handling pointer, mouse, touch, or wheel input in PixiJS v8. Covers eventMode (none, passive, auto, static, dynamic), FederatedEvent types, propagation and capture phase, hitArea, interactiveChildren, cursor and cursorStyles, global move events for drag, eventFeatures config. Triggers on: eventMode, FederatedPointerEvent, pointerdown, click, tap, globalpointermove, drag, hitArea, cursor, stopPropagation.
Security Assessment
About pixijs-events
PixiJS v8's federated event system mirrors DOM events on the scene graph, and this skill covers handling pointer, mouse, touch, and wheel input. An object opts into interaction by setting its eventMode, after which handlers can be attached with the EventEmitter style on/once/off, the DOM-style addEventListener, or property handlers like onclick. The eventMode values are none (no interaction, subtree skipped), passive (default; self not interactive but interactive children still work), auto (hit tested only when a parent is interactive), static (standard interaction for buttons, UI, and drag targets), and dynamic (like static but also fires synthetic events from the ticker for objects moving under a stationary cursor). isInteractive() reports whether an object can currently receive events.
The doc enumerates the event families: pointer events (pointerdown, pointerup, pointertap, pointerover, and so on, recommended for cross-device use), mouse events including click and wheel, touch events that carry modifier-key flags copied from the native TouchEvent, global move events (globalpointermove, globalmousemove, globaltouchmove) that fire on every movement regardless of cursor position, and container lifecycle events such as added, removed, and childAdded that need no eventMode. Propagation works like the DOM with stopPropagation and stopImmediatePropagation, and any event supports a capture phase by appending capture to its name. Hit testing walks the display tree to find the top-most interactive element, skipping none subtrees, honoring interactiveChildren = false, and preferring a custom hitArea over bounds-based testing.
Practical patterns include dragging by combining pointerdown/pointerup/pointerupoutside with globalpointermove (global move is essential because plain move events only fire over the listening object), assigning hitArea shapes such as Rectangle, Circle, Polygon, or a custom contains() implementation to override and speed up hit tests, and cursor handling via the per-object cursor property or reusable named styles registered on app.renderer.events.cursorStyles. FederatedPointerEvent carries rich data including global and client points, target and currentTarget, pointerType, and pointerId. Use this skill whenever you need interactive objects, drag behavior, custom hit regions, or cursor feedback in a PixiJS app.
FAQ
How do I make an object interactive?
Set its eventMode, typically container.eventMode = 'static' for buttons, UI elements, and drag targets, then attach handlers with on(), addEventListener(), or property handlers like onclick. Use 'dynamic' only for objects that move under a stationary cursor and need continuous hover updates.
Why aren't my drag move events firing when the pointer leaves the object?
Plain pointermove only fires while the pointer is over the listening object. For dragging, listen to globalpointermove, which fires on every pointer movement regardless of whether the pointer is over the object.
How do I stop an event from reaching a parent?
Call event.stopPropagation() in the child handler to prevent the parent from receiving the event, or stopImmediatePropagation() to also block other listeners; capture-phase listeners (event name plus 'capture') run before the event reaches its target.
Can I define a custom clickable area?
Yes. Assign a hitArea such as a Rectangle, Circle, or Polygon, or an object implementing contains(x, y). A hitArea overrides bounds-based testing and can speed up hit tests on large or complex objects.
What is the difference between event.target and event.currentTarget?
event.target is the Container that actually received the event, while event.currentTarget is the Container whose listener is currently running during propagation.
Install pixijs-events
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
pixijs/pixijs-skills