В Chrome 47 появилась новая функция, которая упрощает понимание того, как пользователи взаимодействуют с вашим сайтом: InputDeviceCapabilities ! Давайте сделаем шаг назад и узнаем, почему это важно.
События ввода DOM представляют собой абстракцию над событиями ввода низкого уровня, слабо связанными с вводом физического устройства (например, события click могут запускаться с помощью мыши, сенсорного экрана или клавиатуры). Однако есть проблема: не существует простого способа получить сведения о физическом устройстве, ответственном за событие.
Кроме того, некоторые типы ввода могут генерировать дополнительные «поддельные» события ввода DOM по соображениям совместимости. Одно из таких ложных событий DOM происходит, когда пользователь касается сенсорного экрана (например, на мобильном телефоне); он генерирует не только события касания, но, по соображениям совместимости, и события мыши.
Это вызывает проблемы у разработчиков при поддержке как мышиного, так и сенсорного ввода. Трудно определить, представляет ли событие mousedown новый ввод с помощью мыши или это просто событие совместимости с ранее обработанным событием Touchstart.
Новый API InputDeviceCapabilities предоставляет подробную информацию о базовых источниках входных событий через объект sourceCapabilities в UIEvent.
У объекта есть свойство firesTouchEvents , для которого установлено значение true или false в зависимости от того, как событие было сгенерировано действием пользователя.
Вопрос в том, где это следует использовать?
Помимо событий указателя, многие разработчики сегодня обрабатывают логику взаимодействия на сенсорном уровне, запрещая Default, чтобы в первую очередь избежать создания «фальшивых» событий мыши. Этот дизайн хорошо работает во многих сценариях, и его не нужно менять, чтобы использовать преимущество InputDeviceCapabilities.
Но в некоторых сценариях вы действительно не хотите предотвращать событие касания по умолчанию; например, вы по-прежнему хотите, чтобы нажатия отправляли события «щелчка» и меняли фокус. В этих случаях информация, содержащаяся в свойстве MouseEvent.sourceCapabilities.firesTouchEvents , позволяет вам начать консолидировать логику для событий касания и мыши в модель, аналогичную тому, как вы управляете логикой с помощью событий указателя. То есть у вас может быть только один набор кода, который управляет логикой взаимодействия и предоставляет разработчикам более простой способ совместного использования логики между браузерами, которые поддерживают или не поддерживают события указателя.
function addMouseEventListener(target, type, handler, capture) {
target.addEventListener(type, function(e) {
if (e.sourceCapabilities.firesTouchEvents)
return false;
return handler(e);
}, capture);
}
Хорошей новостью является то, что Рик Байерс заполнил его Polyfill , поэтому вы можете использовать его на большинстве платформ.
Сегодня этот API минимален, ориентирован на решение конкретной проблемы с идентификацией событий мыши, полученных из событий касания . Возможно даже создать экземпляр InputDeviceCapabilities ; однако он содержит только firesTouchEvents . Ожидается, что в будущем он будет расширен , чтобы вы могли лучше понимать все устройства ввода в системе пользователя. Мы будем рады получить ваши отзывы о вариантах использования .