MouseEvent: relatedTarget Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
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
| Specification |
|---|
| Pointer Events # dom-mouseevent-relatedtarget |