SVGElement.blur() — Methode · JavaScript-Referenz

Signatur

SVGElement.prototype.blur()

Beschreibung

Die Methode blur() nimmt einem SVG-Element den Tastaturfokus. Sie stammt aus dem Mixin HTMLOrSVGElement und verhält sich deshalb genauso wie HTMLElement.blur(). Ist das Element fokussiert, verliert es den Fokus. Danach ist in der Regel document.body das document.activeElement.

Gebraucht wird das bei interaktiven SVG-Grafiken, etwa bei anklickbaren Diagrammsegmenten, Kartenregionen oder Icons, die über tabindex fokussierbar gemacht wurden. Typische Anlässe: nach einer Mausaktion den Fokusrahmen entfernen, ein eigenes Dialog- oder Menü-Verhalten umsetzen oder den Fokus beim Schließen einer Ansicht zurücksetzen.

Beim Fokusverlust feuert das Element die Events blur (steigt nicht auf) und focusout (steigt auf). Ist das Element gar nicht fokussiert, passiert nichts: Es wird kein Fehler geworfen und kein Event ausgelöst.

Rückgabewert

Typ

undefined

Beschreibung

Kein Rückgabewert.

Beispiele

Fokus nach Mausklick von einem SVG-Kreis entfernen

// <svg><circle id="punkt" cx="50" cy="50" r="40" tabindex="0" /></svg>
const punkt = document.querySelector('#punkt');

punkt.addEventListener('pointerup', () => {
  // Aktion ausführen, danach Fokusrahmen entfernen
  console.log('Punkt ausgewählt');
  punkt.blur();
  console.log(document.activeElement === punkt);
});

Punkt ausgewählt false

focus() und blur() mit Events kombinieren

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('width', '100');
rect.setAttribute('height', '50');
rect.setAttribute('tabindex', '0'); // fokussierbar machen
svg.append(rect);
document.body.append(svg);

rect.addEventListener('focus', () => console.log('fokussiert'));
rect.addEventListener('blur', () => console.log('Fokus verloren'));

rect.focus();
rect.blur();

fokussiert Fokus verloren

Kartenregion per Escape-Taste verlassen

const regionen = document.querySelectorAll('svg .region[tabindex]');

regionen.forEach((region) => {
  region.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
      region.blur();
      document.querySelector('#karten-tooltip')?.setAttribute('hidden', '');
    }
  });
});

// Wichtig · Fallstricke

Fokussierbarkeit: Die meisten SVG-Elemente sind von Haus aus nicht fokussierbar. Ausnahmen sind z. B. <a href>. Ohne tabindex hat also auch blur() keine Wirkung.
Barrierefreiheit: Wer blur() aufruft, ohne den Fokus gezielt an ein anderes Element zu geben, lässt Tastaturnutzer ohne Orientierung zurück: Der Fokus springt an den Dokumentanfang. Oft ist es besser, mit element.focus() ein sinnvolles Ziel zu setzen. Soll nur der Fokusrahmen bei Mausnutzung verschwinden, eignet sich CSS mit :focus-visible.
Kein Fehler: Ist das Element nicht fokussiert, bleibt der Aufruf ohne Folgen.
Kompatibilität: focus() und blur() auf SVGElement gibt es in allen aktuellen Browsern. Sehr alte Versionen (z. B. Internet Explorer oder ältere Versionen des alten Edge) boten sie nicht zuverlässig an. Wer diese Browser noch unterstützen muss, sollte vorher prüfen: typeof el.blur === 'function'.

Siehe auch

SVGElement.focus() HTMLElement.blur() Document.activeElement SVGElement FileSystemEntry.toURL()