Skip to main content

Pointers

Manages pointer events, including tracking multiple pointers, and emitting callbacks for pointer interactions.

Basic Demo​

Callbacks​

note

All Module callbacks are available in this class.

Initialization​

caution

For proper functionality, ensure the container has an appropriate touch-action property.

If touch-action is missing, the browser may block pointer events such as pointermove during scrolling or gestures, causing inconsistent behavior.

<div class="container" id="container"></div>
.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}
import { Pointers } from "vevet";

const container = document.getElementById("container");

const pointers = new Pointers(
  {
    container,
    relative: true,
  },
  {
    onPointermove: ({ pointer }) => {
      console.log(pointer.current.x, pointer.current.y)
    },
  }
);

Destroy the pointers instance:

pointers.destroy();

Best Practices​

  • Always set an appropriate touch-action on the container to ensure consistent pointermove behavior on mobile.
  • Use relative: true when working with draggable, scrollable, or transformed containers for stable coordinates.
  • To detect gestures such as pinch/zoom, rely on pointersMap and track distances between pointers.
  • Destroy the instance when it's no longer needed to avoid memory leaks and stale event listeners.