ResizeObserver.unobserve() — Methode · JavaScript-Referenz

Signatur

ResizeObserver.prototype.unobserve(target)

Beschreibung

Mit unobserve() entfernt man ein einzelnes Element aus der Liste der Ziele, deren Größenänderungen ein ResizeObserver meldet. Andere Elemente, die derselbe Observer beobachtet, bleiben davon unberührt. So kann eine Observer-Instanz viele Elemente verwalten, und man entfernt sie einzeln, wenn sie nicht mehr gebraucht werden.

Typische Einsätze: Ein Element wird aus dem DOM entfernt (z. B. beim Unmount einer Komponente), eine einmalige Messung reicht aus („erst messen, dann aufhören“) oder ein Element soll nur beobachtet werden, bis es einen bestimmten Zustand erreicht hat.

Wenn das übergebene Element gar nicht beobachtet wird, passiert einfach nichts; es wird kein Fehler geworfen. Wer alle Ziele auf einmal abmelden will, nimmt disconnect().

Parameter

Name	Typ	Default	Beschreibung
$target Pflicht	Element \| SVGElement		Das Element, dessen Beobachtung beendet werden soll. Es muss dieselbe Referenz sein, die vorher an `observe()` übergeben wurde.

Beispiele

Einmalige Messung, danach Beobachtung beenden

const box = document.querySelector('#box');

const observer = new ResizeObserver((entries, obs) => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(`Erste Größe: ${Math.round(width)} × ${Math.round(height)}`);
    // Nur die erste Messung interessiert uns
    obs.unobserve(entry.target);
  }
});

observer.observe(box);

Erste Größe: 300 × 150

Ein Observer für viele Karten – einzelne Karte abmelden

const cards = document.querySelectorAll('.card');

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const width = entry.contentBoxSize[0].inlineSize;
    entry.target.classList.toggle('compact', width < 250);
  }
});

cards.forEach((card) => observer.observe(card));

// Karte beim Entfernen sauber abmelden
const removeCard = (card) => {
  observer.unobserve(card);
  card.remove();
};

document.addEventListener('click', (event) => {
  const btn = event.target.closest('.card .close');
  if (btn) removeCard(btn.closest('.card'));
});

Aufräumen in einer Komponente (z. B. React-Hook)

import { useEffect, useRef, useState } from 'react';

export const useElementWidth = () => {
  const ref = useRef(null);
  const [width, setWidth] = useState(0);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new ResizeObserver(([entry]) => {
      setWidth(entry.contentRect.width);
    });
    observer.observe(el);
    // Beim Unmount nur dieses Element abmelden
    return () => observer.unobserve(el);
  }, []);

  return [ref, width];
};

// Wichtig · Fallstricke

Kein Fehler bei unbekannten Zielen: Wird ein Element übergeben, das nicht beobachtet wird, passiert nichts. Tippfehler oder falsche Referenzen bleiben deshalb leicht unbemerkt.
Kein Element angegeben: Ohne Argument oder mit einem Nicht-Element (z. B. null) wirft der Aufruf einen TypeError.
Referenz sichern: Beim Aufräumen (z. B. in React-useEffect) die Elementreferenz vorher in einer Variablen speichern, weil ref.current zu diesem Zeitpunkt schon null sein kann.
Bereits eingeplante Meldungen: Wird unobserve() innerhalb des Callbacks aufgerufen, enthält das aktuelle entries-Array das Element trotzdem noch; erst danach kommen keine Meldungen mehr.
Speicher: Moderne Browser halten beobachtete Elemente nicht dauerhaft fest, sobald Observer und Element nicht mehr erreichbar sind. Ausdrückliches Abmelden ist trotzdem gute Praxis und verhindert unnötige Callback-Aufrufe.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt (Chrome 64+, Firefox 69+, Safari 13.1+, Edge 79+). Für sehr alte Browser gibt es Polyfills.

Siehe auch

new IntersectionObserver() ResizeObserver.observe() ResizeObserver.disconnect() PressureObserver.unobserve() PressureObserver.observe()