In JavaScript, the pointerdown event fires when a pointer becomes active (MDN): mouse (first button pressed), touch (contact starts), or pen (stylus touches the digitizer).
Register a listener with addEventListener. Check readiness and browser support before you rely on this event.
Listen for pointerdown. Start with this line.
addEventListener("pointerdown", fn)| Call | What it does |
|---|---|
addEventListener("pointerdown", fn) | Primary signature. |
Built into the browser. Listen with el.addEventListener("pointerdown", …) — no import required.
addEventListener("pointerdown", fn)| Parameter | Description |
|---|---|
| Event name | Required. "pointerdown" |
| Handler prop | Optional. onpointerdown |
| PointerEvent | Required. pointerId, pointerType, … |
| Capture | Optional. setPointerCapture for drag tracking |
| Return Value | Description |
|---|---|
| * | Fires as an Element event (listener receives the Event object). |
pointerdown (MDN)MDN’s basic listener when a pointer becomes active.
const para = document.querySelector("p");
para.addEventListener("pointerdown", (event) => {
console.log("Pointer down event", event.pointerId, event.pointerType);
});pointerId to track this contact.pointerType to know mouse vs touch vs pen.onpointerdown Property (MDN)Same idea using the event handler property.
const para = document.querySelector("p");
para.onpointerdown = (event) => {
console.log("Pointer down event");
};onpointerdown — MDN supports the handler property.addEventListener("pointerdown", …).on* handler.addEventListener when you need multiple handlers.setPointerCaptureBegin a gesture on down and keep moves targeted to this element.
const pad = document.getElementById("pad");
pad.addEventListener("pointerdown", (event) => {
pad.setPointerCapture(event.pointerId);
console.log("drag start", event.pointerId);
});
pad.addEventListener("pointerup", (event) => {
console.log("drag end", event.pointerId);
});
pad.addEventListener("pointercancel", (event) => {
console.log("drag aborted", event.pointerId);
});setPointerCapture(pointerId).Element pointerdown is Baseline Widely available (MDN: since July 2020). Safe for modern evergreen browsers.
Fires when a pointer becomes active — unified mouse, touch, and pen start.
Bottom line: Prefer pointerdown to start cross-device gestures. See the MDN pointerdown reference.
Continue with the Element pointerenter event.
14 people found this page helpful