Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
MouseEvent: relatedTarget Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die schreibgeschützte Eigenschaft MouseEvent.relatedTarget ist das sekundäre Ziel des Mausereignisses, falls es eines gibt.
Das bedeutet:
| Ereignisname | target |
relatedTarget |
|---|---|---|
| [`mouseenter`](/de/docs/Web/API/Element/mouseenter_event) | Das [`EventTarget`](/de/docs/Web/API/EventTarget), in das das Zeigegerät eingetreten ist | Das [`EventTarget`](/de/docs/Web/API/EventTarget), aus dem das Zeigegerät ausgetreten ist |
| [`mouseleave`](/de/docs/Web/API/Element/mouseleave_event) | Das [`EventTarget`](/de/docs/Web/API/EventTarget), aus dem das Zeigegerät ausgetreten ist | Das [`EventTarget`](/de/docs/Web/API/EventTarget), in das das Zeigegerät eingetreten ist |
| [`mouseout`](/de/docs/Web/API/Element/mouseout_event) | Das [`EventTarget`](/de/docs/Web/API/EventTarget), aus dem das Zeigegerät ausgetreten ist | Das [`EventTarget`](/de/docs/Web/API/EventTarget), in das das Zeigegerät eingetreten ist |
| [`mouseover`](/de/docs/Web/API/Element/mouseover_event) | Das [`EventTarget`](/de/docs/Web/API/EventTarget), in das das Zeigegerät eingetreten ist | Das [`EventTarget`](/de/docs/Web/API/EventTarget), aus dem das Zeigegerät ausgetreten ist |
| [`dragenter`](/de/docs/Web/API/HTMLElement/dragenter_event) | Das [`EventTarget`](/de/docs/Web/API/EventTarget), in das das Zeigegerät eingetreten ist | Das [`EventTarget`](/de/docs/Web/API/EventTarget), aus dem das Zeigegerät ausgetreten ist |
| [`dragleave`](/de/docs/Web/API/HTMLElement/dragleave_event) | Das [`EventTarget`](/de/docs/Web/API/EventTarget), aus dem das Zeigegerät ausgetreten ist | Das [`EventTarget`](/de/docs/Web/API/EventTarget), in das das Zeigegerät eingetreten ist |
Für Ereignisse ohne ein sekundäres Ziel gibt relatedTarget null zurück.
FocusEvent.relatedTarget ist eine ähnliche Eigenschaft für Fokusevents.
Wert
Ein EventTarget Objekt oder null.
Beispiele
Versuchen Sie, Ihren Mauszeiger in die roten und blauen Boxen hinein- und herauszubewegen.
HTML
<body id="body">
<div id="outer">
<div id="red"></div>
<div id="blue"></div>
</div>
<p id="log"></p>
</body>
CSS
#outer {
width: 250px;
height: 125px;
display: flex;
}
#red {
flex-grow: 1;
background: red;
}
#blue {
flex-grow: 1;
background: blue;
}
#log {
max-height: 120px;
overflow-y: scroll;
}
JavaScript
const mouseoutLog = document.getElementById("log"),
red = document.getElementById("red"),
blue = document.getElementById("blue");
red.addEventListener("mouseover", overListener);
red.addEventListener("mouseout", outListener);
blue.addEventListener("mouseover", overListener);
blue.addEventListener("mouseout", outListener);
function outListener(event) {
let related = event.relatedTarget ? event.relatedTarget.id : "unknown";
mouseoutLog.innerText = `\nfrom ${event.target.id} into ${related} ${mouseoutLog.innerText}`;
}
function overListener(event) {
let related = event.relatedTarget ? event.relatedTarget.id : "unknown";
mouseoutLog.innerText = `\ninto ${event.target.id} from ${related} ${mouseoutLog.innerText}`;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Pointer Events # dom-mouseevent-relatedtarget |
Browser-Kompatibilität
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.