JavaScript Node selectstart Event

What You’ll Learn

The selectstart event fires when a user starts a new selection. Learn addEventListener vs onselectstart, how preventDefault() blocks the selection, and why MDN marks this event Limited availability—plus how it fits the Selection API next to addEventListener().

Introduction

When someone presses and drags to highlight text, the browser is about to create a new selection range. Right before that change (in the cases the Selection API defines), it fires selectstart.

MDN: if the event is canceled, the selection is not changed. That makes selectstart useful for “do not allow selecting this content” patterns—with the caveat that support is not universal on every mobile browser.

Understanding selectstart

Part of the Selection API. It answers: “The user is starting a new selection—should we allow it?”

• Fires when a user starts a new selection.
• Cancel with preventDefault() to keep the selection unchanged.
• Generic Event — no special payload properties beyond a normal Event.
• Limited availability — not Baseline; test Safari iOS carefully.

📝 Syntax

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

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

onselectstart = (event) => { };

Event type

A generic Event.

Bubbling and cancelable

Per the Selection API, selectstart bubbles and is cancelable. Canceling it means the user agent must not change the selection.

⚖️ selectstart vs select vs selectionchange

⚠️ Limited Availability (Not Baseline)

MDN labels selectstart as Limited availability: it is not Baseline because it does not work in some widely used browsers. Desktop Chrome, Firefox, Edge, and Safari generally support it; Safari on iOS is a common gap.

It is still a standard Selection API event—not Deprecated, Experimental, or Non-standard. For “no copy” UX, also consider CSS user-select: none as a complementary approach.

Examples Gallery

Examples follow MDN Node: selectstart event. Try It Yourself labs let you drag-select text and watch the log. Use View Output for the expected console messages from the sample handlers.

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

// Drag to highlight any text on the page to fire the event.

Selection started

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

// Note: assigning again replaces the previous onselectstart handler.

Selection started.

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

// Attempting to drag-select text should not create a highlight
// (where selectstart is supported).

Selection blocked

const box = document.getElementById("protect");

box.addEventListener("selectstart", (event) => {
  console.log("selectstart inside #protect");
  console.log("target:", event.target.nodeName);
});

// Selecting text outside #protect will not hit this listener
// unless the event bubbles through another ancestor you also listen on.

selectstart inside #protect
target: P

document.addEventListener("selectstart", () => {
  console.log("Selection started");
  // Selection may still be empty/collapsed at the very start;
  // read again after the user finishes dragging if you need the final text.
  requestAnimationFrame(() => {
    const sel = document.getSelection();
    console.log("isCollapsed:", sel ? sel.isCollapsed : null);
  });
});

Selection started
isCollapsed: true

🚀 Common Use Cases

• Detecting when a user begins highlighting text for analytics or UI tips.
• Blocking selection on branded or protected UI regions (where supported).
• Teaching Selection API basics alongside getSelection().
• Coordinating custom copy/share toolbars that appear after selection starts.
• Combining with CSS user-select for defense in depth.

🔧 How It Works

📝 Notes

• MDN: Limited availability (not Baseline)—verify on Safari iOS and other targets.
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Canceling prevents the selection change; it does not replace CSS user-select.
• Related: addEventListener(), replaceChild(), textContent, Window, JavaScript hub.

💡 Best Practices