PIXI

Class: InteractionManager

PIXI.interaction. InteractionManager

The interaction manager deals with mouse, touch and pointer events. Any DisplayObject can be interactive
if its interactive parameter is set to true
This manager also supports multitouch.

An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction

new PIXI.interaction.InteractionManager(renderer, options)

interaction/InteractionManager.js, line 29
Name Type Description
renderer PIXI.CanvasRenderer | PIXI.WebGLRenderer

A reference to the current renderer
options object optional

The options for the manager.

Name Type Default Description
autoPreventDefault boolean true optional

Should the manager automatically prevent default browser actions.
interactionFrequency number 10 optional

Frequency increases the interaction events will be checked.

Extends

  • EventEmitter

Members

autoPreventDefaultboolean

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

currentCursorModestring

The mode of the cursor that is being used.
The value of this is a key from the cursorStyles dictionary.

currentCursorStylestring

Deprecated
  • since 4.3.0
    See:

    cursorStylesObject.<string, (string|function()|Object.<string, string>)>

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

    defaultCursorStylestring

    Deprecated
    • since 4.3.0
      See:

      eventDataobject

      An event data object to handle all the event tracking/dispatching

      interactionFrequencynumber

      Frequency in milliseconds that the mousemove, moveover & mouseout interaction events will be checked.

      Default Value:
      • 10

      mousePIXI.interaction.InteractionData

      The mouse data

      moveWhenInsideboolean

      This property determines if mousemove and touchmove events are fired only when the cursor
      is over the object.
      Setting to true will make things work more in line with how the DOM verison works.
      Setting to false can make things easier for things like dragging
      It is currently set to false as this is how pixi used to work. This will be set to true in
      future versions of pixi.

      Default Value:
      • false

      rendererPIXI.SystemRenderer

      The renderer this interaction manager works for.

      resolutionnumber

      The current resolution / device pixel ratio.

      Default Value:
      • 1

      readonlysupportsPointerEventsboolean

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

      readonlysupportsTouchEventsboolean

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

      Methods

      destroy()

      interaction/InteractionManager.js, line 1516

      Destroys the interaction manager

      mapPositionToPoint(point, x, y)

      interaction/InteractionManager.js, line 732

      Maps x and y coords from a DOM object and maps them correctly to the pixi 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 PIXI.Point

      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

      setCursorMode(mode)

      interaction/InteractionManager.js, line 666

      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

      update(deltaTime)

      interaction/InteractionManager.js, line 602

      Updates the state of interactive objects.
      Invoked by a throttled ticker update from PIXI.ticker.shared.

      Name Type Description
      deltaTime number

      time delta since last tick

      Events

      click

      interaction/InteractionManager.js, line 285

      Fired when a pointer device button (usually a mouse button) is pressed and released on
      the display object.

      Type:

      mousedown

      interaction/InteractionManager.js, line 249

      Fired when a pointer device button (usually a mouse button) is pressed on the display
      object.

      Type:

      mousemove

      interaction/InteractionManager.js, line 323

      Fired when a pointer device (usually a mouse) is moved while over the display object

      Type:

      mouseout

      interaction/InteractionManager.js, line 339

      Fired when a pointer device (usually a mouse) is moved off the display object

      Type:

      mouseover

      interaction/InteractionManager.js, line 331

      Fired when a pointer device (usually a mouse) is moved onto the display object

      Type:

      mouseup

      interaction/InteractionManager.js, line 267

      Fired when a pointer device button (usually a mouse button) is released over the display
      object.

      Type:

      mouseupoutside

      interaction/InteractionManager.js, line 303

      Fired when a pointer device button (usually a mouse button) is released outside the
      display object that initially registered a
      mousedown.

      Type:

      pointercancel

      interaction/InteractionManager.js, line 363

      Fired when the operating system cancels a pointer event

      pointerdown

      interaction/InteractionManager.js, line 347

      Fired when a pointer device button is pressed on the display object.

      Type:

      pointermove

      interaction/InteractionManager.js, line 387

      Fired when a pointer device is moved while over the display object

      Type:

      pointerout

      interaction/InteractionManager.js, line 403

      Fired when a pointer device is moved off the display object

      Type:

      pointerover

      interaction/InteractionManager.js, line 395

      Fired when a pointer device is moved onto the display object

      Type:

      pointertap

      interaction/InteractionManager.js, line 370

      Fired when a pointer device button is pressed and released on the display object.

      Type:

      pointerup

      interaction/InteractionManager.js, line 355

      Fired when a pointer device button is released over the display object.

      Type:

      pointerupoutside

      interaction/InteractionManager.js, line 378

      Fired when a pointer device button is released outside the display object that initially
      registered a pointerdown.

      Type:

      rightclick

      interaction/InteractionManager.js, line 294

      Fired when a pointer device secondary button (usually a mouse right-button) is pressed
      and released on the display object.

      Type:

      rightdown

      interaction/InteractionManager.js, line 258

      Fired when a pointer device secondary button (usually a mouse right-button) is pressed
      on the display object.

      Type:

      rightup

      interaction/InteractionManager.js, line 276

      Fired when a pointer device secondary button (usually a mouse right-button) is released
      over the display object.

      Type:

      rightupoutside

      interaction/InteractionManager.js, line 313

      Fired when a pointer device secondary button (usually a mouse right-button) is released
      outside the display object that initially registered a
      rightdown.

      Type:

      tap

      interaction/InteractionManager.js, line 434

      Fired when a touch point is placed and removed from the display object.

      Type:

      touchcancel

      interaction/InteractionManager.js, line 427

      Fired when the operating system cancels a touch

      touchend

      interaction/InteractionManager.js, line 419

      Fired when a touch point is removed from the display object.

      Type:

      touchendoutside

      interaction/InteractionManager.js, line 442

      Fired when a touch point is removed outside of the display object that initially
      registered a touchstart.

      Type:

      touchmove

      interaction/InteractionManager.js, line 451

      Fired when a touch point is moved along the display object.

      Type:

      touchstart

      interaction/InteractionManager.js, line 411

      Fired when a touch point is placed on the display object.

      Type: