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
html
<body id="body">
<div id="outer">
<div id="red"></div>
<div id="blue"></div>
</div>
<p id="log"></p>
</body>
CSS
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
js
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 |