Mouse, pointer & touch

One vocabulary for pointing at things

Interfaces used to be designed for a mouse first: move the cursor, press a button, release it, maybe double-click. Phones, tablets, drawing pens, trackpads, and hybrid laptops changed the job. A modern web app needs to answer the same question for many devices: where is the pointer, what is it doing, and should this page react?

This lesson gives you three layers of tools. Mouse events are still important for ordinary clicks, hover, and right-click menus. Pointer events are the newer general-purpose API for mouse, pen, and touch. HTML drag and drop is a specialized browser feature for moving draggable items into drop zones.

A primary mouse click is not one event. In most browsers, a normal click produces a sequence like pointerdown, mousedown, pointerup, mouseup, then click. Middle and secondary buttons may also produce auxclick or contextmenu. Use dblclick only when the double activation itself matters.

Two properties are easy to confuse. button names the button that changed for this event: 0 main, 1 middle/auxiliary, 2 secondary. buttons is a bitmask of all buttons currently held: 1 primary, 2 secondary, 4 auxiliary. During mousemove or pointermove, buttons usually matters more than button.

1pad.addEventListener("pointermove", (event) => {2  show("pointerType", event.pointerType);3  show("pointerId", event.pointerId);4  show("isPrimary", event.isPrimary);5  show("button", event.button);6  show("buttons", event.buttons);7  show("pressure", event.pressure);8});

If you need a custom right-click menu, listen for contextmenu, not only mousedown. If you suppress the browser menu with preventDefault(), provide another way for keyboard and assistive-technology users to reach the same actions. The next lesson, Keyboard & focus, picks up that accessibility thread.

1const event = {Run2  pointerType: "mouse",3  pointerId: 1,4  isPrimary: true,5  button: 0,6  buttons: 1,7};8 9console.log(event.pointerType);10console.log(event.button);11console.log(event.buttons);

Hover events are about boundaries. mouseover and mouseout bubble, so a parent can hear movement involving its children. They also carry relatedTarget, the element the pointer came from or is going to. That is useful for event delegation, but noisy for a card with nested icons and text.

1const parent = document.querySelector(".card");2 3parent.addEventListener("mouseover", (event) => {4  console.log("over", event.target.className);5  console.log("from", event.relatedTarget?.className ?? "outside");6});7 8parent.addEventListener("mouseenter", () => {9  console.log("entered the whole card");10});

Pointer events have matching hover names: pointerover/pointerout bubble, while pointerenter/pointerleave do not. Choose the mouse version when you only care about mouse compatibility; choose pointer versions when the same logic belongs with a pointer-driven widget.

Pointer events include pointerdown, pointermove, pointerup, pointercancel, pointerover, pointerout, pointerenter, and pointerleave. They look a lot like mouse events, but add pointerId, pointerType, isPrimary, pressure, and other hardware-aware properties.

Browsers fire compatibility mouse events after pointer events for most inputs, especially so older mouse-based code still works. That means you should not blindly handle both pointerdown and mousedown for the same action, or you may run it twice. Pick pointer events for custom drawing, sliders, resizing, and gestures.

Dragging is fragile if the pointer must stay exactly over the tiny thing being dragged. A fast hand can leave a slider thumb or resize handle before the next move event. setPointerCapture(event.pointerId) retargets later pointer events for that same pointer to the capturing element until release. Browsers automatically release capture after pointerup, and you can also call releasePointerCapture().

1thumb.addEventListener("pointerdown", (event) => {2  thumb.setPointerCapture(event.pointerId);3  drag(event.clientX);4});5 6thumb.addEventListener("pointermove", (event) => {7  if (event.buttons === 1) drag(event.clientX);8});9 10thumb.addEventListener("pointerup", (event) => {11  thumb.releasePointerCapture(event.pointerId);12});

1thumb.addEventListener("pointerdown", (event) => {2  thumb.setPointerCapture(event.pointerId);3  drag(event.clientX);4});5 6thumb.addEventListener("pointermove", (event) => {7  if (event.buttons === 1) drag(event.clientX);8});9 10thumb.addEventListener("pointerup", (event) => {11  thumb.releasePointerCapture(event.pointerId);12});

HTML drag and drop is a separate API for moving data between a draggable source and a drop target. Set draggable="true", write data in dragstart with event.dataTransfer.setData(), allow a target by calling preventDefault() in dragover (and often dragenter), then read the data in drop. The data store is protected while dragging, so custom data is reliably readable in drop, not during dragover.

1card.draggable = true;2 3card.addEventListener("dragstart", (event) => {4  event.dataTransfer.setData("text/plain", card.id);5});6 7target.addEventListener("dragover", (event) => {8  event.preventDefault();9});10 11target.addEventListener("drop", (event) => {12  const id = event.dataTransfer.getData("text/plain");13  target.append(document.getElementById(id));14});

1card.draggable = true;2 3card.addEventListener("dragstart", (event) => {4  event.dataTransfer.setData("text/plain", card.id);5});6 7target.addEventListener("dragover", (event) => {8  event.preventDefault();9});10 11target.addEventListener("drop", (event) => {12  const id = event.dataTransfer.getData("text/plain");13  target.append(document.getElementById(id));14});

Real front-end work often mixes these APIs. A design tool canvas uses pointer events for mouse, pen, and touch. A splitter captures the pointer so it keeps resizing even when your hand outruns the handle. A file manager might use HTML drag and drop for desktop cards, but a pointer-event implementation for touch screens.

1element.addEventListener("pointerdown", (event) => {2  if (event.button !== 0) return;3  element.setPointerCapture(event.pointerId);4});5 6element.addEventListener("pointermove", (event) => {7  if (event.buttons !== 1) return;8  drawLineTo(event.clientX, event.clientY);9});

Common misconceptions

• “Pointer events are CSS pointer-events.” No. The JavaScript API is events such as pointerdown; the CSS property controls hit-testing.
• “button and buttons are the same.” No. One changed; the other is a held-button bitmask.
• “mouseenter bubbles like mouseover.” It does not. Use mouseover for delegation.
• “Pointer capture captures every pointer.” It captures one pointerId for one element.
• “HTML drag and drop works the same on every touch device.” It does not. Hedge, test, and consider pointer events for custom touch dragging.
• “Calling drop is enough.” The browser normally requires preventDefault() during dragover before a drop target accepts the drop.

Key takeaways

• Mouse events still matter for click, hover, auxiliary click, and context-menu behavior.
• button says what changed; buttons says what is held.
• mouseover/mouseout bubble; mouseenter/mouseleave do not.
• Pointer events are the default choice for custom controls that should work with mouse, pen, and touch.
• Pointer capture keeps one pointer stream going to one element during a drag.
• HTML drag and drop needs dragover plus preventDefault(), and touch behavior varies.

Final definition: Pointer events are browser events that describe one mouse, pen, or touch input point with a shared event vocabulary.

Up next: Keyboard & focus.