pixi.js
    Preparing search index...

    Class FederatedWheelEvent

    A specialized event class for wheel/scroll interactions in PixiJS applications. Extends FederatedMouseEvent to provide wheel-specific properties while maintaining compatibility with the DOM WheelEvent interface.

    Key features:

    • Provides scroll delta information
    • Supports different scroll modes (pixel, line, page)
    • Inherits mouse event properties
    • Normalizes cross-browser wheel events
    // Basic wheel event handling
    sprite.on('wheel', (event: FederatedWheelEvent) => {
        // Get scroll amount
        console.log('Vertical scroll:', event.deltaY);
        console.log('Horizontal scroll:', event.deltaX);

        // Check scroll mode
        if (event.deltaMode === FederatedWheelEvent.DOM_DELTA_LINE) {
            console.log('Scrolling by lines');
        } else if (event.deltaMode === FederatedWheelEvent.DOM_DELTA_PAGE) {
            console.log('Scrolling by pages');
        } else {
            console.log('Scrolling by pixels');
        }

        // Get scroll position
        console.log('Scroll at:', event.global.x, event.global.y);
    });

    // Common use case: Zoom control
    container.on('wheel', (event: FederatedWheelEvent) => {
        // Prevent page scrolling
        event.preventDefault();

        // Zoom in/out based on scroll direction
        const zoomFactor = 1 + (event.deltaY / 1000);
        container.scale.set(container.scale.x * zoomFactor);
    });

    Hierarchy (View Summary)

    Implements

    Index

    Constructors

    constructor

    Properties

    altKey AT_TARGET bubbles BUBBLING_PHASE button buttons cancelable cancelBubble CAPTURING_PHASE client ctrlKey currentTarget defaultPrevented deltaMode deltaX deltaY deltaZ detail eventPhase global isTrusted layer manager metaKey movement nativeEvent NONE offset originalEvent page path propagationImmediatelyStopped propagationStopped relatedTarget returnValue screen shiftKey srcElement target timeStamp type view

    Accessors

    clientX clientY data globalX globalY layerX layerY movementX movementY offsetX offsetY pageX pageY screenX screenY x y

    Methods

    composedPath getLocalPosition getModifierState preventDefault stopImmediatePropagation stopPropagation

    Constructors

    Properties

    altKey: boolean

    Whether the "alt" key was pressed when this mouse event occurred.

    AT_TARGET: 2

    The event propagation phase AT_TARGET that indicates that the event is at the target.

    2
    @advanced
    bubbles: boolean = true

    Flags whether this event bubbles. This will take effect only if it is set before propagation.

    BUBBLING_PHASE: 3

    The event propagation phase BUBBLING_PHASE that indicates that the event is in the bubbling phase.

    3
    @advanced
    button: number

    The specific button that was pressed in this mouse event.

    buttons: number

    The button depressed when this event occurred.

    cancelable: false

    Flags whether this event can be canceled using FederatedEvent.preventDefault. This is always false (for now).

    cancelBubble: boolean = true

    since 7.0.0

    CAPTURING_PHASE: 1

    The event propagation phase CAPTURING_PHASE that indicates that the event is in the capturing phase.

    1
    @advanced
    client: Point = ...

    The coordinates of the mouse event relative to the canvas.

    ctrlKey: boolean

    Whether the "control" key was pressed when this mouse event occurred.

    currentTarget: Container

    The listeners of the event target that are being notified.

    defaultPrevented: boolean = false

    Flags whether the default response of the user agent was prevent through this event.

    deltaMode: number

    The units of deltaX, deltaY, and deltaZ. This is one of DOM_DELTA_LINE, DOM_DELTA_PAGE, DOM_DELTA_PIXEL.

    deltaX: number

    Horizontal scroll amount

    deltaY: number

    Vertical scroll amount

    deltaZ: number

    z-axis scroll amount.

    detail: number

    This is the number of clicks that occurs in 200ms/click of each other.

    eventPhase: number = FederatedEvent.prototype.NONE

    The propagation phase.

    FederatedEvent.NONE

    global: Point = ...

    The pointer coordinates in world space.

    isTrusted: boolean

    Flags whether this is a user-trusted event

    layer: Point = ...

    The coordinates of the event relative to the nearest DOM layer. This is a non-standard property.

    manager: EventBoundary

    The EventBoundary that manages this event. Null for root events.

    metaKey: boolean

    Whether the "meta" key was pressed when this mouse event occurred.

    movement: Point = ...

    The movement in this pointer relative to the last mousemove event.

    nativeEvent: MouseEvent | PointerEvent | PixiTouch

    The native event that caused the foremost original event.

    NONE: 0

    The event propagation phase NONE that indicates that the event is not in any phase.

    0
    @advanced
    offset: Point = ...

    The offset of the pointer coordinates w.r.t. target Container in world space. This is not supported at the moment.

    originalEvent: FederatedEvent<MouseEvent | PointerEvent | PixiTouch>

    The original event that caused this event, if any.

    page

    page: Point = ...

    The coordinates of the event relative to the DOM document. This is a non-standard property.

    path: Container<ContainerChild>[]

    The composed path of the event's propagation. The target is at the end.

    propagationImmediatelyStopped: boolean = false

    Flags whether propagation was immediately stopped.

    propagationStopped: boolean = false

    Flags whether propagation was stopped.

    relatedTarget: EventTarget

    This is currently not implemented in the Federated Events API.

    returnValue: boolean

    since 7.0.0

    screen: Point = ...

    The pointer coordinates in the renderer's screen. This has slightly different semantics than native PointerEvent screenX/screenY.

    shiftKey: boolean

    Whether the "shift" key was pressed when this mouse event occurred.

    srcElement: EventTarget

    since 7.0.0

    target: Container

    The event target that this will be dispatched to.

    timeStamp: number

    The timestamp of when the event was created.

    type: string

    The type of event, e.g. "mouseup".

    view: Window

    The global Window object.

    Accessors

    • get clientX(): number

      Returns number

    • get clientY(): number

      Returns number

    • get data(): this

      Fallback for the deprecated InteractionEvent.data.

      Returns this

      since 7.0.0

    • get globalX(): number

      Returns number

    • get globalY(): number

      Returns number

    • get layerX(): number

      Returns number

    • get layerY(): number

      Returns number

    • get movementX(): number

      Returns number

    • get movementY(): number

      Returns number

    • get offsetX(): number

      Returns number

    • get offsetY(): number

      Returns number

    • get pageX(): number

      Returns number

    • get pageY(): number

      Returns number

    • get screenX(): number

      The pointer coordinates in the renderer's screen. Alias for screen.x.

      Returns number

    • get screenY(): number

      The pointer coordinates in the renderer's screen. Alias for screen.y.

      Returns number

    • get x(): number

      Alias for this.clientX.

      Returns number

    • get y(): number

      Alias for this.clientY.

      Returns number

    Methods

    • Converts global coordinates into container-local coordinates.

      This method transforms coordinates from world space to a container's local space, useful for precise positioning and hit testing.

      Type Parameters

      Parameters

      • container: Container

        The Container to get local coordinates for

      • Optionalpoint: P

        Optional Point object to store the result. If not provided, a new Point will be created

      • OptionalglobalPos: PointData

        Optional custom global coordinates. If not provided, the event's global position is used

      Returns P

      The local coordinates as a Point object

      // Basic usage - get local coordinates relative to a container
      sprite.on('pointermove', (event: FederatedMouseEvent) => {
          // Get position relative to the sprite
          const localPos = event.getLocalPosition(sprite);
          console.log('Local position:', localPos.x, localPos.y);
      });
      // Using custom global coordinates
      const customGlobal = new Point(100, 100);
      sprite.on('pointermove', (event: FederatedMouseEvent) => {
          // Transform custom coordinates
          const localPos = event.getLocalPosition(sprite, undefined, customGlobal);
          console.log('Custom local position:', localPos.x, localPos.y);
      });

    • Whether the modifier key was pressed when this event natively occurred.

      Parameters

      • key: string

        The modifier key.

      Returns boolean

    • Prevent default behavior of both PixiJS and the user agent.

      Returns void

      sprite.on('click', (event) => {
          // Prevent both browser's default click behavior
          // and PixiJS's default handling
          event.preventDefault();

          // Custom handling
          customClickHandler();
      });
      • Only works if the native event is cancelable
      • Does not stop event propagation

    • Stop this event from propagating to any additional listeners, including those on the current target and any following targets in the propagation path.

      Returns void

      container.on('pointerdown', (event) => {
          // Stop all further event handling
          event.stopImmediatePropagation();

          // These handlers won't be called:
          // - Other pointerdown listeners on this container
          // - Any pointerdown listeners on parent containers
      });
      • Immediately stops all event propagation
      • Prevents other listeners on same target from being called
      • More aggressive than stopPropagation()

    • Stop this event from propagating to the next target in the propagation path. The rest of the listeners on the current target will still be notified.

      Returns void

      child.on('pointermove', (event) => {
          // Handle event on child
          updateChild();

          // Prevent parent handlers from being called
          event.stopPropagation();
      });

      // This won't be called if child handles the event
      parent.on('pointermove', (event) => {
          updateParent();
      });
      • Stops event bubbling to parent containers
      • Does not prevent other listeners on same target
      • Less aggressive than stopImmediatePropagation()

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods