Как работает совмещение mouse events и touch events в одном устройстве?

Question

[Денис Инешин]

Во время разработки плагинов рано или поздно сталкиваешься с необходимостью одновременной поддержки десктопов с мышками и разнообразных устройств с touch-экраном, вроде планшетов и смартфонов. До недавнего времени было совершенно достаточно, определить заранее, поддерживаются ли touch-события и далее слушать скажем touchstart/touchend вместо mousedown/mouseup. И всё прекрасно работало.

Сегодня же, некоторое распространение получили гибридные устройства, например Microsoft Surface или некоторые гибридные ноутбуки/моноблоки. Которые помимо привычного мышиного интерфейса, обладают еще и touch-экраном. Это позволяет использовать оба устройства ввода одновременно. И тут возникает проблема.

1. Как можно определить что в браузере одновременно включены оба варианта ввода?
2. Как быть с обратной совместимостью, когда touch-события генерируют еще и обычные мышиные события?
3. И вообще какие мысли по этому поводу?)

Answer 1

[Денис Инешин]

В общем итоге выяснилось следующее: В некоторых вопросах MS впереди планеты всей. При работе с самыми новыми устройствами от MS нужно использовать Pointer Events. Делается это примерно так:

Проверка:

// Pointer Events нужно проверить отдельно, так они совмещают в себе и мышь и тач
var is_pointer = !!window.PointerEvent;
// Отдельная проверка для "менее современных" браузеров
var is_touch = navigator.maxTouchPoints && navigator.maxTouchPoints > 0;

Все, теперь можно использовать. Примерно так:

if (is_pointer) {
    this.$handle.on("pointerdown", this.pointerDown.bind(this));
} else {
    if (is_touch) {
        this.$handle.on("touchstart", this.pointerDown.bind(this));
    } else {
        this.$handle.on("mousedown", this.pointerDown.bind(this));
    }
}

Answer 2

[Иван]

hammerjs.github.io
Мои товарищи используют, вроде то что надо.

Comments

[Денис Инешин]

Не очень понял причем тут hammer.js

[Иван]

Денис Инешин: насколько я понимаю он как раз отлавливают клики, типы, зумы итд.