Я хочу приховати курсор під час показу веб-сторінки, яка призначена для відображення інформації в залі будівлі. Це зовсім не повинно бути інтерактивним. Я спробував із властивістю курсору та прозорим зображенням курсору, але я не змусив його працювати.
Хтось знає, чи можна це зробити? Я припускаю, що це можна вважати загрозою безпеці для користувача, який не може знати, де він натискає, тому я не дуже оптимістичний ... Дякую!
Відповіді:
За допомогою CSS:
selector { cursor: none; }Приклад:
<div class="nocursor">
Some stuff
</div>
<style type="text/css">
.nocursor { cursor:none; }
</style>Щоб встановити це на елементі в Javascript, ви можете використовувати styleвластивість:
<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
document.getElementById('nocursor').style.cursor = 'none';
</script>
Якщо ви хочете встановити це на всьому тілі:
<script type="text/javascript">
document.body.style.cursor = 'none';
</script>
Переконайтеся, що ви дійсно хочете приховати курсор. Це дійсно може дратувати людей.
1x1прозорий png png або 1% прозорість png.
document.body.style.cursor = 'auto'.
Хоча cursor: noneрішення CSS, безумовно, є надійним і простим вирішенням проблеми , якщо ваша реальна мета - видалити курсор за замовчуванням під час використання веб-програми або здійснити власну інтерпретацію необробленого руху миші (наприклад, для FPS-ігор), ви можете хочемо замість цього скористатися API Lock Lock .
Ви можете використовувати requestPointerLock на елементі, щоб видалити курсор і перенаправити всі mousemoveподії на цей елемент (з яким ви можете чи не можете обробити):
document.body.requestPointerLock();Щоб звільнити блокування, ви можете використовувати exitPointerLock :
document.exitPointerLock();Немає курсору, реально
Це дуже потужний виклик API. Він не тільки робить ваш курсор невидимим, але він фактично видаляє нативний курсор вашої операційної системи . Ви не зможете вибрати текст або зробити що- небудь за допомогою миші (крім прослуховування деяких подій миші у вашому коді) до тих пір, поки блокування вказівника не буде звільнено (за допомогою exitPointerLockабо натискання ESCв деяких браузерах).
Тобто ви не можете залишити вікно з курсором, щоб воно знову відображалось, оскільки курсору немає.
Обмеження
Як вже було сказано вище, це дуже потужний виклик API, і таким чином дозволяється здійснювати лише у відповідь на деяку пряму взаємодію користувача з Інтернетом, наприклад, клацання; наприклад:
document.addEventListener("click", function () {
document.body.requestPointerLock();
});
Крім того, requestPointerLockне працюватиме з пісочниці, iframeякщо не встановлено allow-pointer-lockдозвіл.
Повідомлення користувачів
Деякі браузери запропонують користувачеві підтвердження перед тим, як блокування задіяно, деякі просто відобразять повідомлення. Це означає, що блокування вказівника може не активуватися відразу після дзвінка. Однак фактичну активацію блокування вказівника можна прослухати, прослухавши pointerchangeподію на елементі, на якому requestPointerLockвикликався:
document.body.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
// Pointer is now locked to <body>.
}
});
Більшість веб-переглядачів відображатиме повідомлення лише один раз, але Firefox час від часу спаме повідомлення при кожному виклику. AFAIK, це можна вирішити лише за допомогою налаштувань користувача, див. Вимкнути сповіщення про блокування покажчика у Firefox .
Прослуховування сирого руху миші
API блокування вказівника не тільки видаляє мишу, але натомість перенаправляє необроблені дані про переміщення миші до елемента, на який requestPointerLockбуло покликано. Це можна прослухати просто за допомогою mousemoveподії, а потім отримати доступ до властивостей movementXі movementYоб'єктів події:
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});
Я робив це з прозорим * .cur 1px до 1px, але це схоже на маленьку крапку. :( Я думаю, що це найкраща річ, що я можу зробити. Для CSS2.1 немає значення "none" для властивості "cursor" - це було додано в CSS3. Ось чому це працює не завжди.
Якщо ви хочете зробити це в CSS:
#ID { cursor: none !important; }!important.
Для цілого html-документа спробуйте це
html * {cursor:none}Або якщо якийсь css замінить ваш курсор: немає використання!
html * {cursor:none!important}Якщо ви хочете приховати курсор на всій веб-сторінці, використання bodyне буде працювати, якщо не охопить всю видиму сторінку, що не завжди так. Щоб переконатися, що курсор прихований скрізь на сторінці, використовуйте:
document.documentElement.style.cursor = 'none';Щоб відновити його:
document.documentElement.style.cursor = 'auto';Аналог зі статичної CSS нотації у відповідь по Павлом Salaquarda (по суті: html * {cursor:none})