Указывая путь вперед

Раньше указывать на объекты в Интернете было просто. У вас была мышь, вы перемещали ее, иногда нажимали кнопки, и все. Все, что не было мышью, эмулировалось как мышь, и разработчики точно знали, на что рассчитывать.

Однако простота не обязательно означает хорошо. Со временем становилось все более важным, чтобы не все было (или притворялось) мышью: у вас могли быть чувствительные к давлению и наклону ручки, обеспечивающие потрясающую творческую свободу; вы могли пользоваться пальцами, поэтому все, что вам нужно, — это устройство и ваша рука; и эй, почему бы не использовать более одного пальца, пока ты это делаешь?

Некоторое время у нас были события касания, которые помогали нам в этом, но это совершенно отдельный API, специально предназначенный для касания, что заставляет вас кодировать две отдельные модели событий, если вы хотите поддерживать как мышь, так и касание. Chrome 55 поставляется с новым стандартом, который объединяет обе модели: события указателя.

Модель одного события

События указателя унифицируют модель ввода указателя для браузера, объединяя сенсорный ввод, перья и мышь в единый набор событий. Например:

document.addEventListener('pointermove',
    ev => console.log('The pointer moved.'));
foo.addEventListener('pointerover',
    ev => console.log('The pointer is now over foo.'));

Вот список всех доступных событий, который должен показаться вам довольно знакомым, если вы знакомы с событиями мыши:

Различные типы ввода

Как правило, события указателя позволяют писать код, не зависящий от ввода, без необходимости регистрировать отдельные обработчики событий для разных устройств ввода. Конечно, вам все равно нужно помнить о различиях между типами ввода, например, применима ли концепция наведения. Если вы хотите отличить разные типы устройств ввода друг от друга — возможно, чтобы предоставить отдельный код/функциональность для разных входов — вы можете сделать это из одних и тех же обработчиков событий, используя свойство pointerType интерфейса PointerEvent . Например, если вы кодировали боковой навигационный ящик, вы могли бы использовать следующую логику в событии pointermove :

switch(ev.pointerType) {
    case 'mouse':
    // Do nothing.
    break;
    case 'touch':
    // Allow drag gesture.
    break;
    case 'pen':
    // Also allow drag gesture.
    break;
    default:
    // Getting an empty string means the browser doesn't know
    // what device type it is. Let's assume mouse and do nothing.
    break;
}

Действия по умолчанию

В браузерах с сенсорным экраном определенные жесты используются для прокрутки, масштабирования или обновления страницы. В случае событий касания вы по-прежнему будете получать события, пока выполняются эти действия по умолчанию — например, touchmove все равно будет запускаться, пока пользователь прокручивает страницу.

При использовании событий указателя всякий раз, когда запускается действие по умолчанию, такое как прокрутка или масштабирование, вы получаете событие pointercancel , чтобы сообщить, что браузер взял на себя управление указателем. Например:

document.addEventListener('pointercancel',
    ev => console.log('Go home, the browser is in charge now.'));

Встроенная скорость : эта модель по умолчанию обеспечивает более высокую производительность по сравнению с событиями касания, где вам потребуется использовать пассивные прослушиватели событий для достижения того же уровня реагирования.

Вы можете запретить браузеру получать управление с помощью свойства CSS touch-action . Установка значения none для элемента отключит все определенные браузером действия, выполняемые над этим элементом. Но существует ряд других значений для более детального управления, например pan-x , позволяющий браузеру реагировать на движение по оси x, но не по оси y. Chrome 55 поддерживает следующие значения:

Захват указателя

Вы когда-нибудь тратили утомительный час на отладку неработающего события mouseup , пока не поняли, что это происходит потому, что пользователь отпускает кнопку за пределами цели клика? Нет? Ладно, тогда, возможно, это только я.

Тем не менее, до сих пор не было действительно хорошего способа решения этой проблемы. Конечно, вы можете настроить обработчик mouseup в документе и сохранить некоторое состояние в своем приложении, чтобы отслеживать происходящее. Однако это не самое чистое решение, особенно если вы создаете веб-компонент и пытаетесь сохранить все красиво и изолированно.

С событиями указателя появляется гораздо лучшее решение: вы можете захватить указатель, чтобы быть уверенным, что получите это событие pointerup (или любое другое из его неуловимых друзей).

const foo = document.querySelector('#foo');
foo.addEventListener('pointerdown', ev => {
    console.log('Button down, capturing!');
    // Every pointer has an ID, which you can read from the event.
    foo.setPointerCapture(ev.pointerId);
});

foo.addEventListener('pointerup', 
    ev => console.log('Button up. Every time!'));

Поддержка браузера

На момент написания события Pointer Events поддерживаются в Internet Explorer 11, Microsoft Edge, Chrome и Opera и частично поддерживаются в Firefox. Актуальный список можно найти на сайте caniuse.com .

Вы можете использовать полифил Pointer Events для заполнения пробелов. Альтернативно, проверить поддержку браузера во время выполнения очень просто:

if (window.PointerEvent) {
    // Yay, we can use pointer events!
} else {
    // Back to mouse and touch events, I guess.
}

События указателя — отличный кандидат для постепенного улучшения: просто измените методы инициализации, чтобы выполнить описанную выше проверку, добавьте обработчики событий указателя в блок if и переместите обработчики событий мыши/касания в блок else .

Так что давай, дайте им покрутиться и дайте нам знать, что вы думаете!