pixi.js
    Preparing search index...

    Class FederatedPointerEvent

    A specialized event class for pointer interactions in PixiJS applications. Extends FederatedMouseEvent to provide advanced pointer-specific features while maintaining compatibility with the DOM PointerEvent interface.

    Key features:

    • Supports multi-touch interactions
    • Provides pressure sensitivity
    • Handles stylus input
    • Tracks pointer dimensions
    • Supports tilt detection
    // Basic pointer event handling
    sprite.on('pointerdown', (event: FederatedPointerEvent) => {
        // Access pointer information
        console.log('Pointer ID:', event.pointerId);
        console.log('Pointer Type:', event.pointerType);
        console.log('Is Primary:', event.isPrimary);

        // Get pressure and tilt data
        console.log('Pressure:', event.pressure);
        console.log('Tilt:', event.tiltX, event.tiltY);

        // Access contact geometry
        console.log('Size:', event.width, event.height);
    });

    // Handle stylus-specific features
    sprite.on('pointermove', (event: FederatedPointerEvent) => {
        if (event.pointerType === 'pen') {
            // Handle stylus tilt
            const tiltAngle = Math.atan2(event.tiltY, event.tiltX);
            console.log('Tilt angle:', tiltAngle);

            // Use barrel button pressure
            console.log('Tangential pressure:', event.tangentialPressure);
        }
    });

    Hierarchy (View Summary)

    Implements

    Index

    Constructors

    constructor

    Properties

    altitudeAngle altKey AT_TARGET azimuthAngle bubbles BUBBLING_PHASE button buttons cancelable cancelBubble CAPTURING_PHASE client ctrlKey currentTarget defaultPrevented detail eventPhase global height isPrimary isTrusted layer manager metaKey movement nativeEvent NONE offset originalEvent page path pointerId pointerType pressure propagationImmediatelyStopped propagationStopped relatedTarget returnValue screen shiftKey srcElement tangentialPressure target tiltX tiltY timeStamp twist type view width

    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

    altitudeAngle: number

    The angle in radians of a pointer or stylus measuring the vertical angle between the device's surface to the pointer or stylus. A stylus at 0 degrees would be directly parallel whereas at π/2 degrees it would be perpendicular.

    https://developer.mozilla.org/docs/Web/API/PointerEvent/altitudeAngle)

    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
    azimuthAngle: number

    The angle in radians of a pointer or stylus measuring an arc from the X axis of the device to the pointer or stylus projected onto the screen's plane. A stylus at 0 degrees would be pointing to the "0 o'clock" whereas at π/2 degrees it would be pointing at "6 o'clock".

    https://developer.mozilla.org/docs/Web/API/PointerEvent/azimuthAngle)

    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.

    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.

    height: number = 0

    The height of the pointer's contact along the y-axis, measured in CSS pixels. radiusY of TouchEvents will be represented by this value.

    https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height

    isPrimary: boolean = false

    Indicates whether or not the pointer device that created the event is the primary pointer.

    https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary

    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.

    pointerId: number

    The unique identifier of the pointer.

    https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId

    pointerType: string

    The type of pointer that triggered the event.

    https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType

    pressure: number

    Pressure applied by the pointing device during the event. s A Touch's force property will be represented by this value.

    https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure

    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

    tangentialPressure: number

    Barrel pressure on a stylus pointer.

    https://w3c.github.io/pointerevents/#pointerevent-interface

    target: Container

    The event target that this will be dispatched to.

    tiltX: number

    The angle, in degrees, between the pointer device and the screen.

    https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX

    tiltY: number

    The angle, in degrees, between the pointer device and the screen.

    https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY

    timeStamp: number

    The timestamp of when the event was created.

    twist: number

    Twist of a stylus pointer.

    https://w3c.github.io/pointerevents/#pointerevent-interface

    type: string

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

    view: Window

    The global Window object.

    width: number = 0

    The width of the pointer's contact along the x-axis, measured in CSS pixels. radiusX of TouchEvents will be represented by this value.

    https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width

    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