JavaScript Element pointerdown Event

What You’ll Learn

The pointerdown event fires when a pointer becomes active. Learn addEventListener vs onpointerdown, pointerId / pointerType, how it differs from mousedown, implicit touch capture, drag-start with setPointerCapture, and five try-it labs.

Introduction

pointerdown answers: “Did a pointer just become active on this element?” That covers mouse (first button), touch (finger down), and pen (stylus contact) under one API.

Prefer Pointer Events when you want one code path for mouse, touch, and pen. Keep primary UI activation on click so keyboard users share the same path.

Understanding pointerdown

An instance event that answers: “Did this pointer just go active?”

• Mouse — first button pressed (not each additional button).
• Touch — physical contact with the digitizer.
• Pen — stylus makes contact with the digitizer.
• PointerEvent — pointerId, pointerType, isPrimary, and more.
• Baseline Widely available on MDN (since July 2020).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("pointerdown", (event) => { });

onpointerdown = (event) => { };

Event type

A PointerEvent (inherits from MouseEvent and Event).

Handy properties

🤳 Implicit Pointer Capture

MDN notes that on touchscreen browsers that allow direct manipulation, pointerdown can trigger implicit pointer capture. The target then receives later pointer events as if they occurred over it.

• While that capture is set, pointerover / pointerenter / pointerleave / pointerout may not fire as you would expect.
• Release with releasePointerCapture(), or wait for pointerup / pointercancel.
• You can also call setPointerCapture(pointerId) yourself for drag UIs.

⚖️ pointerdown vs Related Events

Examples Gallery

Examples follow MDN Element: pointerdown event. Press with a mouse, touch, or pen on the stage elements.

const para = document.querySelector("p");
const out = document.getElementById("out");

para.addEventListener("pointerdown", (event) => {
  out.textContent = "Pointer down event";
});

Pointer down event

const para = document.querySelector("p");
const out = document.getElementById("out");

para.onpointerdown = (event) => {
  out.textContent = "onpointerdown at " + event.clientX + "," + event.clientY;
};

onpointerdown at 84,36

const stage = document.getElementById("stage");
const out = document.getElementById("out");

stage.addEventListener("pointerdown", (event) => {
  out.textContent =
    "down id=" + event.pointerId +
    " type=" + event.pointerType +
    " primary=" + event.isPrimary;
});

down id=1 type=mouse primary=true

const handle = document.getElementById("handle");
const out = document.getElementById("out");

handle.addEventListener("pointerdown", (event) => {
  handle.setPointerCapture(event.pointerId);
  handle.classList.add("is-dragging");
  out.textContent = "captured id=" + event.pointerId;
});

handle.addEventListener("pointerup", (event) => {
  handle.classList.remove("is-dragging");
  out.textContent = "released";
});

handle.addEventListener("pointercancel", () => {
  handle.classList.remove("is-dragging");
  out.textContent = "cancelled";
});

captured id=1

const stage = document.getElementById("stage");
const out = document.getElementById("out");
let pointerCount = 0;
let mouseCount = 0;

stage.addEventListener("pointerdown", () => {
  pointerCount++;
  render();
});

stage.addEventListener("mousedown", () => {
  mouseCount++;
  render();
});

function render() {
  out.textContent =
    "pointerdown=" + pointerCount + " mousedown=" + mouseCount;
}

pointerdown=1 mousedown=2

🚀 Common Use Cases

• Start drag, draw, or resize sessions for mouse, touch, and pen.
• Call setPointerCapture so moves stay on your handle.
• Show pressed / active feedback immediately.
• Branch by pointerType when stylus pressure or tilt matters.
• Teach unified Pointer Events vs mouse-only mousedown.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2020) — no Deprecated / Experimental / Non-standard banner.
• Primary UI actions: prefer click so keyboard users share the same path.
• Clear gesture state on both pointerup and pointercancel.
• Implicit touch capture can suppress some over/leave events until release.
• Related learning: pointercancel, pointerenter, mousedown, addEventListener(), JavaScript hub.

💡 Best Practices