Как скрыть курсор мыши в браузере
Я хочу скрыть курсор при отображении веб-страницы, предназначенной для отображения информации в зале здания. Он не должен быть интерактивным. Я попытался с свойством курсора и прозрачным изображением курсора, но я не заставил его работать.
кто-нибудь знает, можно ли это сделать? Я полагаю, что это можно рассматривать как угрозу безопасности для пользователя, который не может знать, где он нажимает, поэтому я не очень оптимистичен. Спасибо!
чтобы установить это на элементе в Javascript, вы можете использовать style свойства:
если вы хотите установить это на все тело:
убедитесь, что вы действительно хотите скрыть курсор. Может!--14-->действительно раздражать людей.
С cursor: none CSS решение, безусловно, твердый и легкий решение, если ваша цель -удалить курсор по умолчанию во время использования веб-приложения или реализации вашего собственные интерпретация движения мыши raw (например, для игр FPS), вы можете рассмотреть возможность использования API блокировки указателя.
чтобы отпустить замок, вы можете использовать exitPointerLock:
дополнительная информация
нет курсора, по-настоящему
это очень мощный вызов API. Это не только делает ваш курсор невидимым, но это на самом деле удаляет собственный курсор вашей операционной системы. Вы не сможете выбрать текст или сделать что-нибудь С помощью мыши (за исключением прослушивания некоторых событий мыши в коде), пока не будет освобождена блокировка указателя (либо с помощью exitPointerLock или клавишей ESC в некоторых браузерах).
то есть вы не можете оставить окно с курсором, чтобы он снова отображался, так как нет курсора.
ограничения
как уже упоминалось выше, это очень мощный вызов API, и, таким образом, разрешено только в ответ на некоторые прямые взаимодействия пользователей в интернете, такие как щелчок; например:
и requestPointerLock не будет работать из песочницы iframe если allow-pointer-lock разрешение установить.
пользователей-уведомления
прослушивание сырого движения мыши
API блокировки указателя не только удаляет мышь, но вместо этого перенаправляет необработанные данные движения мыши на элемент requestPointerLock было. Это можно прослушать, просто используя mousemove событие, то доступ к movementX и movementY свойства объекта событие:
Я хочу скрыть курсор, показывая веб-страницу, предназначенную для отображения информации в зале здания. Он не должен быть интерактивным вообще. Я попытался с использованием свойства курсора и прозрачного изображения курсора, но я не сделал его работу.
Кто-нибудь знает, можно ли это сделать? Я полагаю, это можно считать угрозой безопасности для пользователя, который не может знать, на что он нажимает, поэтому я не очень оптимистичен. Спасибо!
Чтобы установить это для элемента в Javascript, вы можете использовать свойство style :
Если вы хотите установить это для всего тела:
Убедитесь, что вы действительно хотите скрыть курсор. Это может действительно раздражать людей.
Хотя CSS-решение cursor: none , безусловно, представляет собой надежный и простой обходной путь, если вашей реальной целью является удаление курсора по умолчанию во время использования вашего веб-приложения или реализация собственной интерпретации движения мыши (например, для игр FPS) Вы можете использовать API блокировки указателя.
Чтобы снять блокировку, вы можете использовать exitPointerLock:
Дополнительные заметки
Нет курсора, по-настоящему
Это очень мощный вызов API. Он не только делает ваш курсор невидимым, но фактически удаляет собственный курсор вашей операционной системы. Вы не сможете выделять текст или делать что-либо с помощью мыши (за исключением прослушивания некоторых событий мыши в вашем коде), пока не будет снята блокировка указателя (либо с помощью exitPointerLock , либо с помощью ESC в некоторых браузерах).
То есть вы не можете оставить окно с курсором, чтобы оно показывалось снова, поскольку курсора нет.
Ограничения
Как упомянуто выше, это очень мощный API-вызов, и поэтому его можно выполнять только в ответ на некоторое прямое взаимодействие с пользователем в Интернете, такое как щелчок; например:
Кроме того, requestPointerLock не будет работать из изолированной iframe , если не установлено разрешение allow-pointer-lock .
User-уведомления
Прослушивание движения сырой мыши
API блокировки указателя не только удаляет мышь, но и перенаправляет необработанные данные о перемещении мыши в вызываемый элемент requestPointerLock . Это можно прослушать, просто используя событие mousemove , а затем получая доступ к свойствам movementX и movementY объекта события:
Я хочу скрыть курсор при отображении веб-страницы, предназначенной для отображения информации в зале здания. Это не должно быть интерактивным вообще. Я попытался со свойством курсора и прозрачным изображением курсора, но у меня не получилось.
Кто-нибудь знает, можно ли это сделать? Я полагаю, что это может рассматриваться как угроза безопасности для пользователя, который не может знать, где он нажимает, поэтому я не очень оптимистичен . Спасибо!
Чтобы установить это для элемента в Javascript, вы можете использовать свойство style :
Если вы хотите установить это на все тело:
Убедитесь, что вы действительно хотите скрыть курсор. Это может действительно раздражать людей.
Если вы хотите сделать это в CSS:
Хотя cursor: none CSS-решение, безусловно, является надежным и простым обходным решением , если вашей реальной целью является удалить курсор по умолчанию во время использования веб-приложения, или Реализовать собственную интерпретацию движения мыши (например, для игр FPS), вы можете рассмотреть возможность использования API блокировки указателя.
Чтобы снять блокировку, вы можете использовать exitPointerLock:
Дополнительные примечания
Нет курсора, по-настоящему
Это очень мощный вызов API. Он не только делает ваш курсор невидимым, но фактически удаляет собственный курсор вашей операционной системы . Вы не сможете выделять текст или делать что-либо с помощью мыши (за исключением прослушивания некоторых событий мыши в вашем коде), пока не будет снята блокировка указателя (с помощью exitPointerLock или нажав ESC в некоторых браузерах).
То есть вы не можете оставить окно с курсором, чтобы оно показывалось снова, поскольку курсора нет.
Как упомянуто выше, это очень мощный вызов API, и поэтому его можно выполнять только в ответ на некоторое прямое взаимодействие с пользователем в Интернете, такое как щелчок; например:
Кроме того, requestPointerLock не будет работать из изолированной iframe , если не установлено разрешение allow-pointer-lock .
Прослушивание движения сырой мыши
API блокировки указателя не только удаляет мышь, но и перенаправляет необработанные данные о перемещении мыши в вызываемый элемент requestPointerLock . Это можно прослушать, просто используя событие mousemove , а затем получая доступ к свойствам movementX и movementY объекта события:
Я сделал это с прозрачным * .cur 1px до 1px, но это выглядит как маленькая точка. :( Я думаю, что это лучшая кросс-браузерная вещь, которую я могу сделать. CSS2.1 не имеет значения 'none' для свойства 'cursor' - он был добавлен в CSS3. Именно поэтому он работает не везде.
Для всего HTML-документа попробуйте это
Или если некоторые CSS перезаписать ваш курсор: никто не использует! Важный
Pointer Lock API: с легкостью скрываем и отображаем указатель мыши
Метод “requestPointerLock()”, привязанный к случайному элементу, просит браузер скрыть указатель мыши. Браузер делает это, но не без помощи пользователя. Это значит, что вы не можете скрыть курсор при загрузке страницы. Вместо этого, придется воспользоваться хотя бы событием “click”, чтобы указатель исчез.
В нашем примере указатель скрывается как только пользователь кликает по элементу 'canvas'. Подобно тому, как браузеры работают с Fullscreen API, появится всплывающее окно, в котором будет сказано что, что Pointer Lock API пытается скрыть курсор, и что вернуть его можно, нажав на клавишу ESC.
Пока указатель деактивирован (или скрыт), он остается на том же месте, где вы его оставили. Никакое движение не передвинет указатель с того места. Это также подразумевает невозможность убрать курсор за пределы окна браузера. Однако браузер по прежнему будет реагировать на нажатия клавиш мыши.
Чтобы вернуть указатель обратно, нужно воспользоваться методом “exitPointerLock()”. Используя его вкупе с параметром “pointerLockElement”, мы можем скрывать и отображать указатель, кликая по элементу, к которому привязана необходимая операция. Как только курсор будет скрыт, значением “pointerLockElement” станет DOM-элемент, на который и ведет API. В других случаях, значение будет “null”. При помощи, предположим, “pointerLockElement.nodeName” мы можем запросить название элемента – в нашем случае, мы используем “CANVAS” в качестве значения.
В этом примере, мы проверяем, имеет ли “pointerLockElement” значение null. Таким образом, мы проверяем, скрыт ли указатель мыши, или отображен. “requestPointerLock()” или “exitPointerLock()” выполняются соответствующим образом. В отличие от “requestPointerLock()”, “exitPointerLock()” не требует каких-либо действий от пользователя. Нам не нужно начинать метод при помощи события “click”.
В то время, как “requestPointerLock()” можно привязать к любому элементу, “exitPointerLock()” необходимо привязывать к “document”. Не забудьте проставить нужные приставки, так как Pointer Lock API – это кое-что новенькое. “webkitRequestPointerLock()” и “webkitExitPointerLock()” сделают все необходимое.
Продвинутое использование Pointer Lock API: определяем движение указателя мыши
Вместе с Pointer Lock API мы получили два новых параметра для определения движения указателя мыши. На данный момент у нас есть возможность запросить координаты указателя (внутри окна браузера) при помощи event-параметров “clientX” и “clientY”. Новые параметры “movementX” и “movementY” делают немного больше – они способны определять движение указателя мыши, а не просто его расположение.
В данном примере, мы позволяет событию “mousemove” запустить функцию, которая вписывает последние значения “clientX” и “movementX” в заголовок документа. В то время, как “clientX” сообщает нам значение расположения на момент запроса, “movementX” сообщает нам о движении указателя по оси X, относительно последнего запуска функции. Чем быстрее двигается указатель, тем выше поднимается значение “movementX”. Движение вправо (“movementX”) и вниз (“movementY”) всегда выдаст в ответ положительное значение, а перемещение влево и вверх будет выдавать отрицательные значения. Если движения не происходит вообще, то значение останется на 0.
В данном случае значения “clientX” и “clientY” останутся неизменными. У них будут те значения, которые были выставлены при деактивации. Параметры “movementX” и “movementY” не имеют никаких зависимостей от Pointer Lock API, и их также можно использовать с полностью видимыми указателями.
Не забывайте использовать правильные приставки к новым параметрам. К примеру, вместе с “webkitMovementX” и “webkitMovementY”.
Pointer-Lock-API и непредвиденные ситуации: реагирование на изменения статуса и ошибки
Pointer Lock API знаком с двумя слушателями событий. Первый называется “pointerlockchange”, и он всегда исполняет функцию либо при сокрытии, либо при отображении указателя мыши.
Второй слушатель событий, “pointerlockerror” позволяет нам реагировать на ошибки, которые могут произойти в процессе сокрытия или отображения указателя мыши. Как мы уже отметили ранее, браузер будет реагировать только на сокрытие указателя, так как метод “requestPointerLock()” запускается посредством события “click”. Если мы запустим “requestPointerLock()” посредством “load”, браузер не отреагирует на сокрытие, и вместо этого запустится “pointerlockerror”.
“pointerlockchange” и “pointerlockerror” реагируют на специфические для браузеров варианты как “webkitpointerlockchange” и “webkitpointerlockerror”.
Браузерная поддержка
На момент написания этой статьи, Pointer Lock API поддерживается настольными версиями Chrome и Firefox. Мобильные браузеры абсолютно не поддерживают этот API, даже мобильные версии Chrome и Firefox не способны предоставить соответствующую поддержку. Так как API имеет большое влияние в сфере игр, есть вероятность, что людям придется устанавливать указанные браузеры, чтобы иметь возможность с удовольствием поиграть во что-нибудь. Если и дальше будет движение в этом направлении, то стоит ожидать, что соответствующая поддержка появится во всех популярных браузерах.
Обнаружили ошибку или мёртвую ссылку?Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса. Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:
Читайте также: