Tôi muốn ẩn con trỏ khi hiển thị trang web có nghĩa là hiển thị thông tin trong hội trường tòa nhà. Nó hoàn toàn không phải tương tác. Tôi đã thử với thuộc tính con trỏ và hình ảnh con trỏ trong suốt nhưng tôi không làm cho nó hoạt động.
Có ai biết nếu điều này có thể được thực hiện? Tôi cho rằng điều này có thể được coi là mối đe dọa bảo mật cho người dùng không thể biết anh ta đang nhấp vào đâu, vì vậy tôi không lạc quan lắm ... Cảm ơn bạn!
Câu trả lời:
Với CSS:
selector { cursor: none; }Một ví dụ:
<div class="nocursor">
Some stuff
</div>
<style type="text/css">
.nocursor { cursor:none; }
</style>Để đặt phần tử này trên một phần tử trong Javascript, bạn có thể sử dụng thuộc styletính:
<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
document.getElementById('nocursor').style.cursor = 'none';
</script>Nếu bạn muốn đặt cái này trên toàn bộ cơ thể:
<script type="text/javascript">
document.body.style.cursor = 'none';
</script>Hãy chắc chắn rằng bạn thực sự muốn ẩn con trỏ. Nó thực sự có thể làm phiền mọi người.
1x1png trong suốt px hoặc png trong suốt 1%.
document.body.style.cursor = 'auto'.
Mặc dù cursor: nonegiải pháp CSS chắc chắn là một cách giải quyết ổn định và dễ dàng , nhưng nếu mục tiêu thực tế của bạn là loại bỏ con trỏ mặc định trong khi ứng dụng web của bạn đang được sử dụng hoặc thực hiện giải thích di chuyển chuột thô của riêng bạn (ví dụ như trò chơi FPS), bạn có thể muốn xem xét sử dụng API Khóa con trỏ thay thế.
Bạn có thể sử dụng requestPulumLock trên một phần tử để xóa con trỏ và chuyển hướng tất cả các mousemovesự kiện đến phần tử đó (mà bạn có thể hoặc không thể xử lý):
document.body.requestPointerLock();Để giải phóng khóa, bạn có thể sử dụng exitPulumLock :
document.exitPointerLock();Không có con trỏ, thực sự
Đây là một cuộc gọi API rất mạnh mẽ. Nó không chỉ hiển thị con trỏ của bạn vô hình, mà nó thực sự loại bỏ con trỏ riêng của hệ điều hành của bạn . Bạn sẽ không thể chọn văn bản hoặc làm bất cứ điều gì với chuột của bạn (ngoại trừ nghe một số sự kiện chuột trong mã của bạn) cho đến khi khóa con trỏ được phát hành (bằng cách sử dụng exitPointerLockhoặc nhấn ESCtrong một số trình duyệt).
Đó là, bạn không thể rời khỏi cửa sổ với con trỏ để nó hiển thị lại, vì không có con trỏ.
Những hạn chế
Như đã đề cập ở trên, đây là một lệnh gọi API rất mạnh và do đó chỉ được phép thực hiện để đáp ứng với một số tương tác trực tiếp của người dùng trên web, chẳng hạn như nhấp chuột; ví dụ:
document.addEventListener("click", function () {
document.body.requestPointerLock();
});Ngoài ra, requestPointerLocksẽ không hoạt động từ hộp cát iframetrừ khi allow-pointer-lockđược phép.
Thông báo người dùng
Một số trình duyệt sẽ nhắc người dùng xác nhận trước khi khóa được kích hoạt, một số trình duyệt sẽ chỉ hiển thị một thông báo. Điều này có nghĩa là khóa con trỏ có thể không kích hoạt ngay sau cuộc gọi. Tuy nhiên, việc kích hoạt thực tế khóa con trỏ có thể được lắng nghe bằng cách lắng nghe pointerchangesự kiện trên phần tử requestPointerLockđược gọi là:
document.body.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
// Pointer is now locked to <body>.
}
});Hầu hết các trình duyệt sẽ chỉ hiển thị tin nhắn một lần, nhưng Firefox sẽ thỉnh thoảng spam tin nhắn trên mỗi cuộc gọi. AFAIK, điều này chỉ có thể được xử lý bằng cài đặt người dùng, xem Tắt thông báo khóa con trỏ trong Firefox .
Lắng nghe chuyển động của chuột thô
API Khóa con trỏ không chỉ loại bỏ chuột mà thay vào đó chuyển hướng dữ liệu di chuyển chuột thô đến phần tử requestPointerLockđược gọi. Điều này có thể được nghe đơn giản bằng cách sử dụng mousemovesự kiện, sau đó truy cập vào movementXvà movementYcác thuộc tính trên đối tượng sự kiện:
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});Tôi đã làm điều đó với trong suốt * .cur 1px đến 1px, nhưng nó trông giống như một chấm nhỏ. :( Tôi nghĩ đó là điều tốt nhất trên trình duyệt mà tôi có thể làm. CSS2.1 không có giá trị 'không' cho thuộc tính 'con trỏ' - nó đã được thêm vào CSS3. Đó là lý do tại sao nó không thể hoạt động ở mọi nơi.
Nếu bạn muốn làm điều đó trong CSS:
#ID { cursor: none !important; }!important.
Đối với toàn bộ tài liệu html hãy thử điều này
html * {cursor:none}Hoặc nếu một số css ghi đè con trỏ của bạn: không sử dụng! Quan trọng
html * {cursor:none!important}Nếu bạn muốn ẩn con trỏ trong toàn bộ trang web, sử dụng bodysẽ không hoạt động trừ khi nó bao phủ toàn bộ trang hiển thị, điều này không phải lúc nào cũng đúng. Để đảm bảo con trỏ được ẩn ở mọi nơi trong trang, hãy sử dụng:
document.documentElement.style.cursor = 'none';Để kích hoạt nó:
document.documentElement.style.cursor = 'auto';Sự tương tự với ký hiệu CSS tĩnh nằm trong câu trả lời của Pavel SalaTHERa (về bản chất html * {cursor:none}:)