Document: thuộc tính pointerLockElement
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Thuộc tính chỉ đọc pointerLockElement của giao diện Document cung cấp phần tử được đặt làm mục tiêu cho các sự kiện chuột trong khi con trỏ bị khóa.
Nó là null nếu khóa đang chờ xử lý, con trỏ được mở khóa, hoặc mục tiêu nằm trong tài liệu khác.
Giá trị
Một Element hoặc null.
Ví dụ
Kiểm tra trạng thái khóa con trỏ
Ví dụ này chứa một phần tử <div> chứa một <button>. Nhấp vào nút sẽ yêu cầu khóa con trỏ cho <div>.
Ví dụ cũng lắng nghe sự kiện pointerlockchange: khi sự kiện này được kích hoạt, trình xử lý sự kiện sẽ vô hiệu hóa nút "Lock" nếu một phần tử trong tài liệu có khóa con trỏ, và kích hoạt nút nếu không.
Hiệu ứng của điều này là nếu bạn nhấp vào nút "Lock", con trỏ bị khóa và nút bị vô hiệu hóa: nếu bạn sau đó thoát khỏi khóa con trỏ (ví dụ: bằng cách nhấn phím Escape), nút được kích hoạt lại.
HTML
<div id="container">
<button id="lock">Lock</button>
</div>
CSS
div {
height: 100px;
width: 200px;
border: 2px solid blue;
}
JavaScript
const lock = document.querySelector("#lock");
const container = document.querySelector("#container");
lock.addEventListener("click", () => {
container.requestPointerLock();
});
document.addEventListener("pointerlockchange", () => {
const locked = document.pointerLockElement;
lock.disabled = Boolean(locked);
});
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| Pointer Lock 2.0 # dom-documentorshadowroot-pointerlockelement |