Controls whether default browser actions are automatically prevented on pointer events. When true, prevents default browser actions from occurring on pointer events.
// Allow default browser actions
app.renderer.events.autoPreventDefault = false;
// Block default actions (default)
app.renderer.events.autoPreventDefault = true;
// Example with text selection
const text = new Text('Selectable text');
text.eventMode = 'static';
app.renderer.events.autoPreventDefault = false; // Allow text selection
Dictionary of custom cursor styles that can be used across the application. Used to define how different cursor modes are handled when interacting with display objects.
// Access event system through renderer
const eventSystem = app.renderer.events;
// Set string-based cursor styles
eventSystem.cursorStyles.default = 'pointer';
eventSystem.cursorStyles.hover = 'grab';
eventSystem.cursorStyles.drag = 'grabbing';
// Use CSS object for complex styling
eventSystem.cursorStyles.custom = {
cursor: 'url("custom.png") 2 2, auto',
userSelect: 'none'
};
// Use a url for custom cursors
const defaultIcon = 'url(\'https://pixijs.com/assets/bunny.png\'),auto';
eventSystem.cursorStyles.icon = defaultIcon;
// Use callback function for dynamic cursors
eventSystem.cursorStyles.dynamic = (mode) => {
// Update cursor based on mode
document.body.style.cursor = mode === 'hover'
? 'pointer'
: 'default';
};
// Apply cursor style to a sprite
sprite.cursor = 'hover'; // Will use the hover style defined above
sprite.cursor = 'icon'; // Will apply the icon cursor
sprite.cursor = 'custom'; // Will apply the custom CSS styles
sprite.cursor = 'drag'; // Will apply the grabbing cursor
sprite.cursor = 'default'; // Will apply the default pointer cursor
sprite.cursor = 'dynamic'; // Will call the dynamic function
The DOM element to which the root event listeners are bound. This is automatically set to the renderer's view.
ReadonlyfeaturesThe event features that are enabled by the EventSystem
The renderer managing this EventSystem.
The resolution used to convert between the DOM client space into world space.
Readonly AdvancedrootThe 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).
ReadonlysupportsIndicates whether the current device supports pointer events according to the W3C Pointer Events spec. Used to optimize event handling and provide more consistent cross-device interaction.
https://www.w3.org/TR/pointerevents/ W3C Pointer Events Specification
ReadonlysupportsIndicates whether the current device supports touch events according to the W3C Touch Events spec. This is used to determine the appropriate event handling strategy.
https://www.w3.org/TR/touch-events/ W3C Touch Events Specification
StaticdefaultThe event features that are enabled by the EventSystem
import { EventSystem, EventSystemFeatures } from 'pixi.js';
// Access the default event features
EventSystem.defaultEventFeatures = {
// Enable pointer movement events
move: true,
// Enable global pointer move events
globalMove: true,
// Enable click events
click: true,
// Enable wheel events
wheel: true,
};
The global pointer event instance containing the most recent pointer state. This is useful for accessing pointer information without listening to events.
// Access current pointer position at any time
const eventSystem = app.renderer.events;
const pointer = eventSystem.pointer;
// Get global coordinates
console.log('Position:', pointer.global.x, pointer.global.y);
// Check button state
console.log('Buttons pressed:', pointer.buttons);
// Get pointer type and pressure
console.log('Type:', pointer.pointerType);
console.log('Pressure:', pointer.pressure);
FederatedPointerEvent For all available pointer properties
StaticdefaultThe default interaction mode for all display objects.
Destroys all event listeners and detaches the renderer.
Maps coordinates from DOM/screen space into PixiJS normalized coordinates. This takes into account the current scale, position, and resolution of the DOM element.
The point to store the mapped coordinates in
The x coordinate in DOM/client space
The y coordinate in DOM/client space
// Map mouse coordinates to PixiJS space
const point = new Point();
app.renderer.events.mapPositionToPoint(
point,
event.clientX,
event.clientY
);
console.log('Mapped position:', point.x, point.y);
// Using with pointer events
sprite.on('pointermove', (event) => {
// event.global already contains mapped coordinates
console.log('Global:', event.global.x, event.global.y);
// Map to local coordinates
const local = event.getLocalPosition(sprite);
console.log('Local:', local.x, local.y);
});
Sets the current cursor mode, handling any callbacks or CSS style changes. The cursor can be a CSS cursor string, a custom callback function, or a key from the cursorStyles dictionary.
Cursor mode to set. Can be:
// Using predefined cursor styles
app.renderer.events.setCursor('pointer'); // Set standard pointer cursor
app.renderer.events.setCursor('grab'); // Set grab cursor
app.renderer.events.setCursor(null); // Reset to default
// Using custom cursor styles
app.renderer.events.cursorStyles.custom = 'url("cursor.png"), auto';
app.renderer.events.setCursor('custom'); // Apply custom cursor
// Using callback-based cursor
app.renderer.events.cursorStyles.dynamic = (mode) => {
document.body.style.cursor = mode === 'hover' ? 'pointer' : 'default';
};
app.renderer.events.setCursor('dynamic'); // Trigger cursor callback
Sets the domElement and binds event listeners. This method manages the DOM event bindings for the event system, allowing you to change or remove the target element that receives input events.
This will default to the canvas element of the renderer, so you should not need to call this unless you are using a custom element.
The new DOM element to bind events to, or null to remove all event bindings
// Set a new canvas element as the target
const canvas = document.createElement('canvas');
app.renderer.events.setTargetElement(canvas);
// Remove all event bindings
app.renderer.events.setTargetElement(null);
// Switch to a different canvas
const newCanvas = document.querySelector('#game-canvas');
app.renderer.events.setTargetElement(newCanvas);
The system for handling UI events in PixiJS applications. This class manages mouse, touch, and pointer events, normalizing them into a consistent event model.
Example
Features:
See