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