MouseEvent: relatedTarget property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính chỉ đọc MouseEvent.relatedTarget là mục tiêu phụ cho sự kiện chuột, nếu có.
Đó là:
| Tên sự kiện | target |
relatedTarget |
|---|---|---|
mouseenter |
EventTarget mà thiết bị trỏ đã đi vào |
EventTarget mà thiết bị trỏ đã rời khỏi |
mouseleave |
EventTarget mà thiết bị trỏ đã rời khỏi |
EventTarget mà thiết bị trỏ đã đi vào |
mouseout |
EventTarget mà thiết bị trỏ đã rời khỏi |
EventTarget mà thiết bị trỏ đã đi vào |
mouseover |
EventTarget mà thiết bị trỏ đã đi vào |
EventTarget mà thiết bị trỏ đã rời khỏi |
dragenter |
EventTarget mà thiết bị trỏ đã đi vào |
EventTarget mà thiết bị trỏ đã rời khỏi |
dragleave |
EventTarget mà thiết bị trỏ đã rời khỏi |
EventTarget mà thiết bị trỏ đã đi vào |
Đối với các sự kiện không có mục tiêu phụ, relatedTarget trả về null.
FocusEvent.relatedTarget là một thuộc tính tương tự cho các sự kiện focus.
Giá trị
Một đối tượng EventTarget hoặc null.
Ví dụ
Hãy thử di chuyển con trỏ chuột vào và ra khỏi hộp màu đỏ và xanh lam.
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}`;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| Pointer Events # dom-mouseevent-relatedtarget |