Node: selectstart — Ereignis · JavaScript-Referenz

Signatur

node.addEventListener("selectstart", handler)

Beschreibung

Das Ereignis selectstart gehört zur Selection API. Es wird auf einem Node ausgelöst, wenn der Benutzer eine neue Auswahl beginnt, etwa durch Drücken der Maustaste mit anschließendem Ziehen, durch Doppelklick, per Tastatur (Umschalt+Pfeiltasten) oder auf Touch-Geräten durch langes Drücken. Ziel des Ereignisses ist der Knoten, an dem die Auswahl beginnt. Es steigt auf (bubbling) und erreicht deshalb auch document und window.

Das Ereignis ist abbrechbar. Ruft man event.preventDefault() auf, wird die neue Auswahl gar nicht erst angelegt und die bestehende Auswahl bleibt unverändert. Das eignet sich z. B. für eigene Drag-Oberflächen, Spielfelder oder Schaltflächen, bei denen versehentliches Markieren von Text stört.

Man registriert einen Handler entweder mit addEventListener("selectstart", handler) oder über die Eigenschaft onselectstart. Der Handler erhält ein normales Event-Objekt. Um Änderungen an einer bereits laufenden Auswahl zu verfolgen, nutzt man stattdessen selectionchange auf document.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"selectstart"`.
$handler Pflicht	(event: Event) => void		Callback, der beim Beginn einer Auswahl aufgerufen wird. `event.target` ist der Knoten, an dem die Auswahl beginnt.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `capture`, `once`, `passive` oder `signal`. Mit `passive: true` hat `preventDefault()` keine Wirkung.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein Event-Objekt mit bubbles: true und cancelable: true.

Beispiele

Beginn einer Auswahl protokollieren (addEventListener)

const artikel = document.querySelector('article');

artikel.addEventListener('selectstart', (event) => {
  // Knoten, an dem die Auswahl beginnt (oft ein Textknoten)
  const start = event.target;
  console.log('Auswahl beginnt in:', start.nodeName);
});

Auswahl beginnt in: #text

Textauswahl in einem Drag-Bereich verhindern

const board = document.querySelector('#spielfeld');

const blockSelection = (event) => {
  event.preventDefault(); // es wird keine neue Auswahl angelegt
};

board.addEventListener('selectstart', blockSelection);

// Später wieder erlauben
document.querySelector('#bearbeiten').addEventListener('click', () => {
  board.removeEventListener('selectstart', blockSelection);
  console.log('Textauswahl wieder erlaubt');
});

Textauswahl wieder erlaubt

Über die onselectstart-Eigenschaft und mit Ausnahmen

document.onselectstart = (event) => {
  // Eingabefelder und ausdrücklich freigegebene Bereiche dürfen markiert werden
  const el = event.target.nodeType === Node.TEXT_NODE
    ? event.target.parentElement
    : event.target;
  if (el?.closest('input, textarea, [data-selectable]')) return;
  event.preventDefault();
};

// Handler entfernen
// document.onselectstart = null;

Zusammen mit selectionchange den markierten Text auslesen

let aktiv = false;

document.addEventListener('selectstart', () => {
  aktiv = true;
  console.log('Neue Auswahl gestartet');
});

document.addEventListener('selectionchange', () => {
  if (!aktiv) return;
  const text = document.getSelection()?.toString() ?? '';
  console.log('Aktuell markiert:', text);
});

document.addEventListener('pointerup', () => { aktiv = false; });

Neue Auswahl gestartet Aktuell markiert: Hallo Welt

// Wichtig · Fallstricke

Ziel ist oft ein Textknoten: event.target kann ein Text-Knoten sein, also kein Element. Methoden wie closest() gibt es dort nicht, deshalb vorher über parentElement zum Element gehen.
Nur für neue Auswahlen: Das Ereignis kommt nicht, wenn eine bestehende Auswahl erweitert wird, und auch nicht bei Auswahl per Skript (Selection.addRange(), select()). Für laufende Änderungen selectionchange verwenden.
Nur mit CSS geht es oft einfacher: Um Markieren grundsätzlich zu sperren, reicht meist user-select: none. selectstart braucht man, wenn die Entscheidung zur Laufzeit fallen soll.
Barrierefreiheit: Wer das Markieren großflächig verhindert, behindert Nutzer, die Text kopieren, übersetzen oder vorlesen lassen wollen. Als Kopierschutz taugt das ohnehin nicht, denn der Text steht weiter im DOM.
Formularfelder: In <input> und <textarea> verhalten sich die Browser nicht einheitlich, ob und auf welchem Ziel das Ereignis ausgelöst wird.
Kompatibilität: Lange nur in IE/Chrome/Safari vorhanden, in Firefox seit Version 52. Heute in allen modernen Browsern verfügbar.

Siehe auch

Document: selectionchange Selection Document.getSelection() Window.getSelection() Event.preventDefault() EventTarget.addEventListener() EventSource: open