PixiJS

Class: EventSystem

EventSystem

The system for handling UI events.

new EventSystem (renderer)

ts:202
Name Type Description
renderer Renderer

Implements

Members

defaultEventFeatures EventSystemFeatures static

The event features that are enabled by the EventSystem (included in the pixi.js and pixi.js-legacy bundle), otherwise it will be ignored.

Properties:
Name Type Default Description
click boolean true

Enables pointer events associated with clicking.
globalMove boolean true

Enables global pointer move events.
move boolean true

Enables pointer events associated with pointer movement.
wheel boolean true

Enables wheel events.
Since:
  • 7.2.0

defaultEventMode EventMode staticreadonly

The default interaction mode for all display objects.

Since:
  • 7.2.0
See:
  • Container.eventMode

autoPreventDefault boolean

Should default browser actions automatically be prevented. Does not apply to pointer events for backwards compatibility preventDefault on pointer events stops mouse events from firing Thus, for every pointer event, there will always be either a mouse of touch event alongside it.

Default Value:
  • true

cursorStyles Record<string, string | ((mode: string) => void) | CSSStyleDeclaration>

Dictionary of how different cursor modes are handled. Strings are handled as CSS cursor values, objects are handled as dictionaries of CSS values for domElement, and functions are called instead of changing the CSS. Default CSS cursor values are provided for 'default' and 'pointer' modes.

domElement HTMLElement

The DOM element to which the root event listeners are bound. This is automatically set to the renderer's view.

Default Value:
  • undefined

features EventSystemFeatures readonly

The event features that are enabled by the EventSystem (included in the pixi.js and pixi.js-legacy bundle), otherwise it will be ignored.

Since:
  • 7.2.0
Example
 const app = new Application()
 app.renderer.events.features.globalMove = false

 // to override all features use Object.assign
 Object.assign(app.renderer.events.features, {
  move: false,
  globalMove: false,
  click: false,
  wheel: false,
 })

pointer Readonly<FederatedPointerEvent>

The global pointer event. Useful for getting the pointer position without listening to events.

Since:
  • 7.2.0

renderer Renderer

The renderer managing this EventSystem.

resolution number

The resolution used to convert between the DOM client space into world space.

Default Value:
  • 1

rootBoundary EventBoundary readonly

The EventBoundary for the stage.

The rootTarget of this root boundary is automatically set to the last rendered object before any event processing is initiated. This means the main scene needs to be rendered atleast once before UI events will start propagating.

The root boundary should only be changed during initialization. Otherwise, any state held by the event boundary may be lost (like hovered & pressed Containers).

supportsPointerEvents readonly

Does the device support pointer events https://www.w3.org/Submission/pointer-events/

Default Value:
  • --

supportsTouchEvents readonly

Does the device support touch events https://www.w3.org/TR/touch-events/

Methods

destroy () void

ts:266

Destroys all event listeners and detaches the renderer.

mapPositionToPoint (point, x, y) void

ts:608

Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The resulting value is stored in the point. This takes into account the fact that the DOM element could be scaled and positioned anywhere on the screen.

Name Type Description
point PointData

the point that the result will be stored in
x number

the x coord of the position to map
y number

the y coord of the position to map

setCursor (mode) void

ts:274

Sets the current cursor mode, handling any callbacks or CSS style changes.

Name Type Description
mode string

cursor mode, a key from the cursorStyles dictionary

setTargetElement (element) void

ts:470

Sets the domElement and binds event listeners.

To deregister the current DOM element without setting a new one, pass null.

Name Type Description
element HTMLElement

The new DOM element.

normalizeWheelEvent (nativeEvent) FederatedWheelEvent protected

ts:710

Normalizes the native WheelEvent.

The returned FederatedWheelEvent is a shared instance. It will not persist across multiple native wheel events.

Name Type Description
nativeEvent WheelEvent

The native wheel event that occurred on the canvas.
Returns:
Type Description
FederatedWheelEvent A federated wheel event.

onWheel (nativeEvent) void protected

ts:457

Passive handler for wheel events on this.domElement.

Name Type Description
nativeEvent WheelEvent

The native wheel event.