# Pointer Events

Pointer Events provide a unified interface for handling input from various pointing devices, such as a mouse, a pen/stylus, or a touchscreen.

## 1. The Problem: Mouse vs. Touch

Historically, web developers had to write separate event listeners for Mouse Events (`mousedown`, `mousemove`) and Touch Events (`touchstart`, `touchmove`). This led to duplicated code and complexity.

Pointer Events abstract these differences. A "pointer" is any hardware agnostic contact point on the screen.

## 2. Event Types

Pointer events inherit from Mouse Events, so they share many properties (`clientX`, `clientY`, `button`, etc.).

*   `pointerdown`: A pointer becomes active (button pressed, screen touched).
*   `pointerup`: A pointer is no longer active.
*   `pointermove`: A pointer changes coordinates.
*   `pointerover` / `pointerenter`: A pointer enters an element's boundaries.
*   `pointerout` / `pointerleave`: A pointer leaves an element's boundaries.
*   `pointercancel`: The browser cancels the pointer interaction (e.g., palm rejection, or a native gesture like scrolling takes over).

## 3. Basic Usage

```javascript
const box = document.querySelector('.box');

box.addEventListener('pointerdown', (e) => {
  console.log('Pointer down!');
  console.log('Pointer ID:', e.pointerId);
  console.log('Pointer Type:', e.pointerType); // 'mouse', 'pen', or 'touch'
});
```

## 4. Pointer Capture

Pointer capture allows you to retarget all future pointer events to a specific element, even if the pointer moves outside the boundaries of that element. This is essential for implementing drag-and-drop or sliders.

```javascript
const slider = document.getElementById('slider');

slider.addEventListener('pointerdown', (e) => {
  // Capture the pointer to the slider element
  slider.setPointerCapture(e.pointerId);
});

slider.addEventListener('pointermove', (e) => {
  if (slider.hasPointerCapture(e.pointerId)) {
    // Handle dragging logic here
    console.log('Dragging...', e.clientX);
  }
});

slider.addEventListener('pointerup', (e) => {
  // Release the capture
  slider.releasePointerCapture(e.pointerId);
});
```

## 5. CSS `touch-action`

To use Pointer Events effectively on touch devices, you often need to disable the browser's default handling of gestures (like scrolling or zooming) on the target element.

```css
.canvas {
  /* Disable browser handling of all gestures */
  touch-action: none; 
}
```

[[programming/javascript/vanilla/javascript]]
[[programming/javascript/vanilla/events]]
[[programming/javascript/vanilla/drag-and-drop-api]]