---
url: /api/helpers/onPointerEvents/functions/onPointerEvents.md
---
# onPointerEvents()

```ts
function onPointerEvents(
  element: HTMLElement,
  handlers: {
    enter?: (args: {
      pointer: {
        x: number;
        y: number;
      };
      boundingRect: {};
      center: {};
    }) => void;
    move?: (args: {
      pointer: {
        x: number;
        y: number;
      };
      boundingRect: {};
      center: {};
    }) => void;
    leave?: (args: {
      pointer: {
        x: number;
        y: number;
      };
      boundingRect: {};
      center: {};
    }) => void;
    down?: (args: {
      pointer: {
        x: number;
        y: number;
      };
      boundingRect: {};
      center: {};
    }) => void;
    up?: (args: {
      pointer: {
        x: number;
        y: number;
      };
      boundingRect: {};
      center: {};
    }) => void;
  },
): {
  stop: () => void;
  listen: () => void;
};
```

Listen to pointer events on an element and provide the pointer position, element bounding rect and center to the handlers.

## Parameters

### element

`HTMLElement`

### handlers

#### enter?

(`args`: {
`pointer`: {
`x`: `number`;
`y`: `number`;
};
`boundingRect`: {
};
`center`: {
};
}) => `void`

#### move?

(`args`: {
`pointer`: {
`x`: `number`;
`y`: `number`;
};
`boundingRect`: {
};
`center`: {
};
}) => `void`

#### leave?

(`args`: {
`pointer`: {
`x`: `number`;
`y`: `number`;
};
`boundingRect`: {
};
`center`: {
};
}) => `void`

#### down?

(`args`: {
`pointer`: {
`x`: `number`;
`y`: `number`;
};
`boundingRect`: {
};
`center`: {
};
}) => `void`

#### up?

(`args`: {
`pointer`: {
`x`: `number`;
`y`: `number`;
};
`boundingRect`: {
};
`center`: {
};
}) => `void`

## Returns

```ts
{
  stop: () => void;
  listen: () => void;
}
```

| Name       | Type         |
| ---------- | ------------ |
| `stop()`   | () => `void` |
| `listen()` | () => `void` |