Pixijs Events

const button = new Sprite(await Assets.load("button.png"));button.eventMode = "static";button.cursor = "pointer";app.stage.addChild(button);
button.on("pointertap", (event) => {  console.log("clicked at", event.global.x, event.global.y);});
let dragging = false;button.on("pointerdown", () => {  dragging = true;});button.on("pointerup", () => {  dragging = false;});button.on("pointerupoutside", () => {  dragging = false;});button.on("globalpointermove", (event) => {  if (dragging) button.parent.toLocal(event.global, undefined, button.position);});

import { Sprite } from "pixi.js";
const sprite = new Sprite();
// No interaction at all; children also ignoredsprite.eventMode = "none";
// Default. Self not interactive; interactive children still worksprite.eventMode = "passive";
// Hit tested only when a parent is interactivesprite.eventMode = "auto";
// Standard interaction: receives pointer/mouse/touch eventssprite.eventMode = "static";
// Like static, but also fires synthetic events from the ticker// when the pointer is stationary (for animated objects under cursor)sprite.eventMode = "dynamic";

sprite.eventMode = "static";sprite.isInteractive(); // true
sprite.eventMode = "passive";sprite.isInteractive(); // false

import { Sprite } from "pixi.js";
const sprite = new Sprite();sprite.eventMode = "static";
// EventEmitter style (recommended)const handler = (e) => console.log("clicked");sprite.on("pointerdown", handler);sprite.once("pointerdown", handler); // one-timesprite.off("pointerdown", handler);
// DOM stylesprite.addEventListener(  "click",  (event) => {    console.log("Clicked!", event.detail);  },  { once: true },);
// Property-based handlerssprite.onclick = (event) => {  console.log("Clicked!", event.detail);};

import { Sprite, Container } from "pixi.js";
const parent = new Container();parent.eventMode = "static";
const child = new Sprite();child.eventMode = "static";parent.addChild(child);
child.on("pointerdown", (event) => {  console.log("child pressed");  event.stopPropagation(); // prevent parent from receiving this event});
parent.on("pointerdown", () => {  console.log("parent pressed (only if child did not stop propagation)");});

container.addEventListener(  "pointerdown",  (event) => {    event.stopImmediatePropagation(); // blocks event from reaching children  },  { capture: true },);

import { Sprite, Rectangle, Circle, Polygon } from "pixi.js";
const sprite = new Sprite();sprite.eventMode = "static";
// Rectangular hit areasprite.hitArea = new Rectangle(0, 0, 100, 50);
// Circular hit areasprite.hitArea = new Circle(50, 50, 40);
// Polygon hit areasprite.hitArea = new Polygon([0, 0, 100, 0, 50, 100]);
// Custom hit test via contains()sprite.hitArea = {  contains(x: number, y: number): boolean {    return x >= 0 && x <= 100 && y >= 0 && y <= 100;  },};

import { Sprite, FederatedPointerEvent } from "pixi.js";
const sprite = new Sprite();sprite.eventMode = "static";sprite.cursor = "grab";
let dragging = false;
sprite.on("pointerdown", (event: FederatedPointerEvent) => {  dragging = true;  sprite.cursor = "grabbing";});
// globalpointermove fires even when pointer leaves the objectsprite.on("globalpointermove", (event: FederatedPointerEvent) => {  if (dragging) {    sprite.position.set(event.global.x, event.global.y);  }});
sprite.on("pointerup", () => {  dragging = false;  sprite.cursor = "grab";});
sprite.on("pointerupoutside", () => {  dragging = false;  sprite.cursor = "grab";});

app.renderer.events.cursorStyles.default = "url('bunny.png'), auto";app.renderer.events.cursorStyles.hover = "url('bunny_saturated.png'), auto";
sprite.eventMode = "static";sprite.cursor = "hover"; // uses the registered 'hover' style

sprite.on("pointerdown", (event: FederatedPointerEvent) => {  event.global; // scene-space Point where the event happened  event.client; // CSS-pixel Point relative to the viewport  event.offset; // Point w.r.t. target Container in world space (not supported at the moment)  event.target; // the Container that received the event  event.currentTarget; // the Container whose listener is running
  event.pointerType; // 'mouse' | 'pen' | 'touch'  event.pointerId; // unique id for multi-touch tracking  event.isPrimary; // first pointer in a multi-pointer gesture  event.persistentDeviceId; // always 0; present for DOM PointerEvent type compatibility  event.pressure; // 0-1 pen/touch pressure  event.button; // 0 left, 1 middle, 2 right  event.buttons; // bitmask of held buttons  event.altKey; // modifier key state  event.ctrlKey;  event.shiftKey;  event.metaKey;
  event.nativeEvent; // the underlying DOM PointerEvent / MouseEvent / Touch  event.preventDefault();  event.stopPropagation();  event.stopImmediatePropagation();});

await app.init({  eventFeatures: {    move: true, // pointer/mouse/touch move events    globalMove: true, // global move events (globalpointermove, etc.)    click: true, // click/tap/press and contextmenu events    wheel: true, // mouse wheel events  },});
// or configure after initapp.renderer.events.features.globalMove = false;

const sprite = new Sprite(texture);sprite.on("pointerdown", () => {  console.log("clicked");});

const sprite = new Sprite(texture);sprite.eventMode = "static";sprite.on("pointerdown", () => {  console.log("clicked");});

sprite.interactive = true;sprite.buttonMode = true;

sprite.eventMode = "static";sprite.cursor = "pointer";

sprite.eventMode = "static";sprite.on("pointermove", (event) => {  // expects to fire everywhere; only fires inside sprite bounds  updateDrag(event.global.x, event.global.y);});

sprite.eventMode = "static";sprite.on("globalpointermove", (event) => {  // fires everywhere, even outside sprite bounds  updateDrag(event.global.x, event.global.y);});

// This does NOT make children show a pointer cursorparent.cursor = "pointer";
// Each interactive child needs its own cursorchild.eventMode = "static";child.cursor = "pointer";