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
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.
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.
.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