Pointer Events: мышь, касание и перо в одной модели

Назначение

Pointer Events объединяет события разных указательных устройств. Это помогает избежать отдельных почти одинаковых обработчиков мыши и касания, сохранив сведения о типе указателя.

Как это работает

На собственной странице создайте button id pointer-action. Pointerdown используется для диагностики указателя, а само действие привязано к click, чтобы сохранить обычную активацию кнопки клавиатурой.

Пример

const button = document.querySelector("#pointer-action");
button.addEventListener("pointerdown", event => {
  console.log({type:event.pointerType, id:event.pointerId, primary:event.isPrimary});
});
button.addEventListener("click", () => console.log("Действие кнопки"));

Что должно получиться

При указательном вводе доступны тип и идентификатор события. Клавиатурная активация нативной кнопки может вызвать действие click без предшествующего pointerdown.

Граница применения и частая ошибка

Не заменяйте click на pointerdown для всех действий: это может сломать клавиатуру и отмену нажатия. Для жестов учитывайте pointercancel и правила touch-action. IsPrimary относится к категории указателя, а не является идентификатором пользователя.

Самостоятельная проверка

Проверьте мышь, касание при наличии устройства и клавиатуру. Сравните число сообщений действия. Не подключайте одновременно дублирующие mouse- и pointer-обработчики к одной операции без явной необходимости.

Связанные материалы

• События
• Отложенная обработка ввода
• Клавиатура