Как использовать события указателя в JavaScript
Зачем заботиться только об вводе с помощью мыши и сенсорного экрана? Фактически, вы можете обрабатывать оба события одновременно, используя события указателя.
Многие веб-приложения предполагают, что указательным устройством пользователя будет мышь, поэтому для управления взаимодействием они используют события мыши. Однако с появлением устройств с сенсорным экраном пользователям больше не нужна мышь для взаимодействия с Интернетом. Поэтому необходимо поддерживать разнообразные устройства ввода, чтобы иметь как можно большую аудиторию.
В JavaScript есть новый стандарт, называемый событиями указателя. Он обрабатывает как операции мыши, так и сенсорные операции, поэтому вам не придется беспокоиться о реализации каждого из них по отдельности.
Что такое событие указателя?
Событие указателя. Событие указателя — это веб-стандарт, определяющий единый способ обработки различных методов ввода в веб-браузерах, включая мышь, касание и перо. Эти события обеспечивают согласованный и независимый от платформы способ взаимодействия с веб-контентом на разных устройствах.
Короче говоря, события указателя помогают вам обрабатывать взаимодействия пользователей во всех источниках.
Типы событий указателя
События указателя называются так же, как и события мыши, с которыми вы, возможно, знакомы. Для каждого события mouseEvent в JavaScript имеется соответствующее событие pointerEvent. Это означает, что вы можете вернуться к старому коду и переключить «мышь» на «указатель», чтобы начать поддерживать сенсорный и перьевой ввод.
В следующей таблице показано, чем события указателя отличаются от событий мыши:
События указателя
События мыши
указатель вниз
мышь вниз
указатель вверх
наведение курсора мыши
указательперемещение
перемещение мыши
указательоставить
мышьотпуск
наведение указателя
наведение курсора мыши
указательвведите
мысентер
указатель
наведение курсора мыши
указательотмена
никто
GotPointerCapture
никто
потерянный указательзахват
никто
Вы можете видеть, что есть еще 3 события указателя без соответствующих событий мыши. Подробнее об этих событиях вы узнаете позже.
Использование событий указателя в JavaScript
Вы можете использовать события указателя так же, как и события мыши. Как и большинство операций обработки событий, этот процесс обычно следует следующему примеру:
- Используйте селектор DOM для извлечения элемента.
- Используйте метод addEventListener, укажите интересующее событие и функцию обратного вызова.
- Используйте свойства и методы аргумента обратного вызова, объект Event.
Ниже приведен пример использования события pointermove:
// Nhận thành phần mục tiêu const target = document.getElementById(‘target’); // Это может быть важно для достижения цели.addEventListener(‘pointermove’, handlePointerMove); // Hàm để xử lý sự kiện di chuyển с функцией handlePointerMove(ev) { // Xử lý sự kiện theo cách Ban muốn target.textContent = `Moved at x: ${ev.clientX}, y: ${ev. клиентY}`; }
Этот блок кода определяет целевой элемент и функцию JavaScript для обработки события pointermove, затем он использует прослушиватель событий JavaScript для присоединения события и функции указателя к целевому элементу.
Используя этот код, элемент с идентификатором «target» будет отображать координаты управления, когда вы перемещаете по нему курсор, палец или касаетесь пером.
Таким же образом можно использовать и другие события указателя.
Событие PointerCancel
Событие pointercancel вызывается, когда событие указателя прерывается до завершения первоначально запланированной операции. Обычно этот браузер отменяет любые события указателя, которые могли быть выполнены ранее. Существует множество причин, по которым может срабатывать pointercancel, например:
- Когда пользователь получает звонок или другое прерывающее уведомление при перетаскивании элемента на экране.
- При получении устройства ориентация меняется.
- Когда окно браузера теряет фокус.
- Когда пользователь переключается на другую вкладку или приложение.
С помощью события pointercancel вы можете обработать такие ситуации желаемым образом. Например:
const target = document.getElementById(‘target’); target.addEventListener(‘pointercancel’, (event) => { // Если вы хотите, чтобы это произошло, вы можете сделать это, но не хотите, чтобы это произошло. target.releasePointerCapture(event.pointerId); });
Курсор записи
Захват указателя — это функция, которая позволяет определенному элементу HTML захватывать и реагировать на все события указателя для определенного указателя, даже если эти события происходят за пределами этого элемента.
Вы можете установить захват указателя для элемента с помощью метода setpointercapture() и включить его с помощью Releasepointercapture().
События указателя gotpointercapture и losspointercapture полезны при захвате изображений указателя.
Событие Gotpointercapture
Событие gotpointercapture вызывается всякий раз, когда элемент получает указатель. Это событие можно использовать для инициализации состояния элемента HTML, который обрабатывает события указателя. Например, в приложении для рисования вы можете использовать событие gotpointercapture, чтобы установить начальное положение курсора.
Событие LostpointerCapture
Событие LostpointerCapture вызывается, когда компонент теряет возможность захвата указателя. Вы можете использовать его для очистки или удаления любого состояния, созданного, когда компонент вращает курсор. В приложении для рисования вы можете захотеть скрыть курсор.
Надеюсь, статья окажется для вас полезной.
В приведенной выше статье вы познакомились с «Как использовать события указателя в JavaScript». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!
