JavaScript Node selectstart Event

What Is selectstart?

The selectstart event of the Selection API fires when a user starts a new selection (MDN) — for example dragging to highlight text. Cancel it and the selection is not changed.

document.addEventListener("selectstart", (e) => {
  // user began selecting
});

// block selection on this node / document:
e.preventDefault();  // selection is not changed

vs selectionchange → fires after selection updates (not cancelable)
vs getSelection()  → read the current Selection object

How to Use selectstart

Listen on document (or a container), then log or cancel.

1. Add addEventListener("selectstart", …) (or set onselectstart).
2. Drag across text to start a selection.
3. Optionally call preventDefault() to keep the selection unchanged.
4. Feature-test / test Safari iOS if blocking selection is critical.

Pseudocode

on selectstart:
  if blocking this area:
      preventDefault()
      // selection stays as it was
  else:
      // selection may start / update
      // later: selectionchange may fire
      // read with getSelection()

Cheat Sheet

Keep these facts handy when working with text selection.

Live Preview

Drag across the sample text. Toggle allow vs block (preventDefault on selectstart).

Choose allow or block, then drag to select…

JavaScript Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

document.addEventListener("selectstart", () => {
  console.log("Selection started");
});

Selection started

document.onselectstart = () => {
  console.log("Selection started.");
};

Selection started.

const panel = document.getElementById("no-select");

panel.addEventListener("selectstart", (e) => {
  e.preventDefault();
  console.log("selection blocked");
});

selection blocked
/* text is not highlighted */

const allowed = document.getElementById("allowed");

document.addEventListener("selectstart", (e) => {
  if (!allowed.contains(e.target)) {
    e.preventDefault();
  }
});

/* select inside #allowed → ok */
/* select outside → blocked */

document.addEventListener("selectstart", () => {
  console.log("selectstart");
});

document.addEventListener("selectionchange", () => {
  const text = document.getSelection().toString();
  console.log("selectionchange:", JSON.stringify(text));
});

selectstart
selectionchange: "Hel"
selectionchange: "Hello"

Performance Notes

selectstart is cheap (once per new selection). Avoid heavy work on every selectionchange while the user is still dragging.

Key Takeaways