HTMLAnchorElement.interestForElement — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAnchorElement.interestForElement

Beschreibung

Die Eigenschaft interestForElement ist das JavaScript-Gegenstück zum HTML-Attribut interestfor. Ein Element mit diesem Attribut ist ein Interest Invoker: Zeigt der Nutzer „Interesse“ daran, etwa durch Überfahren mit der Maus, Fokussieren per Tastatur oder langes Drücken auf Touch-Geräten, löst der Browser am Zielelement das Ereignis interest aus. Lässt das Interesse nach, folgt das Ereignis loseinterest. Ist das Ziel ein Popover (popover="hint" oder popover="auto"), blendet der Browser es automatisch ein und wieder aus.

Während das Attribut interestfor nur eine ID als Zeichenkette enthält, arbeitet interestForElement mit einer direkten Elementreferenz. So kann man Ziele verbinden, die keine ID haben oder erst per Skript erzeugt werden. Außerdem entfällt der Umweg über getElementById().

Typische Einsatzfälle sind Tooltips, Link-Vorschauen, Hover-Karten für Benutzerprofile oder Hilfetexte, die sich ohne eigene mouseenter-/focus-Logik öffnen sollen. Der Browser kümmert sich dabei um Verzögerungen (einstellbar über die CSS-Eigenschaft interest-delay), um Barrierefreiheit und um die Bedienung per Tastatur.

Parameter

Name	Typ	Default	Beschreibung
$value	Element \| null	null	Beim Setzen: das Element, das als Ziel des Interest Invokers dienen soll. Mit `null` wird die Verknüpfung gelöst und das Attribut `interestfor` entfernt.

Rückgabewert

Typ

Element | null

Beschreibung

Das aktuell verknüpfte Zielelement oder null, wenn kein Ziel gesetzt ist oder die im Attribut interestfor angegebene ID auf kein Element im selben Baum verweist.

Beispiele

Zielelement auslesen

// HTML:
// <a href="/profil/anna" id="link" interestfor="karte">Anna</a>
// <div id="karte" popover="hint">Anna – Frontend-Entwicklerin</div>

const link = document.querySelector('#link');
console.log(link.interestForElement?.id);
console.log(link.getAttribute('interestfor'));

karte karte

Tooltip per Skript erzeugen und verknüpfen

const link = document.querySelector('a.doku');

// Popover ohne ID dynamisch anlegen
const tip = document.createElement('div');
tip.popover = 'hint';
tip.textContent = 'Öffnet die Dokumentation in einem neuen Tab';
document.body.append(tip);

// Direkte Elementreferenz statt ID
link.interestForElement = tip;
console.log(link.interestForElement === tip);

true

Auf interest/loseinterest reagieren und Verknüpfung lösen

const link = document.querySelector('#vorschau-link');
const preview = document.querySelector('#vorschau');

link.interestForElement = preview;

preview.addEventListener('interest', async (event) => {
  // event.source ist der auslösende Invoker
  const res = await fetch(`/api/preview?url=${encodeURIComponent(event.source.href)}`);
  preview.textContent = await res.text();
});

preview.addEventListener('loseinterest', () => {
  console.log('Vorschau geschlossen');
});

// Später: Verknüpfung entfernen
const trennen = () => {
  link.interestForElement = null;
  console.log(link.hasAttribute('interestfor'));
};
trennen();

false

Feature-Erkennung mit Fallback

const link = document.querySelector('#hilfe');
const hint = document.querySelector('#hilfe-text');

if ('interestForElement' in HTMLAnchorElement.prototype) {
  link.interestForElement = hint;
} else {
  // Fallback für Browser ohne Interest Invoker
  link.addEventListener('mouseenter', () => hint.showPopover());
  link.addEventListener('mouseleave', () => hint.hidePopover());
}

// Wichtig · Fallstricke

Experimentell: Interest Invoker gibt es bisher nur in Chromium-basierten Browsern (ab Version 142). Firefox und Safari unterstützen sie noch nicht. Prüfe die Unterstützung per Feature-Erkennung, zum Beispiel mit 'interestForElement' in HTMLAnchorElement.prototype, und sieh einen Fallback vor. Die Spezifikation kann sich noch ändern; frühere Entwürfe hießen interesttarget.
Beschränkung auf Schatten-Bäume: Eine per Skript gesetzte Referenz wird nur zurückgegeben, wenn das Ziel im selben Baum liegt wie der Invoker oder in einem Baum, der diesen umschließt. Verweise in einen tieferen Shadow Root hinein ergeben beim Lesen null.
Attribut und Eigenschaft: Wird eine Elementreferenz gesetzt, enthält das Attribut interestfor keine gültige ID, sondern eine leere Zeichenkette. Wird das Attribut danach wieder direkt gesetzt, überschreibt es die Referenz.
Kein Ersatz für wichtige Inhalte: Auf Touch-Geräten ist „Interesse“ schwer auszulösen, meist nur durch langes Drücken. Wichtige Informationen sollten deshalb nicht ausschließlich in Interest-Zielen stehen.
Die Verzögerung beim Öffnen und Schließen stellst du per CSS mit interest-delay ein, nicht über JavaScript.

Siehe auch

HTMLAnchorElement.hreflang HTMLAnchorElement.hostname HTMLAnchorElement.protocol HTMLAnchorElement.referrerPolicy HTMLAnchorElement.relList