How does the combination of mouse events and touch events work in the same device?

Question

Microsoft

During the development of plugins, sooner or later you are faced with the need to simultaneously support desktops with mice and various touch-screen devices, such as tablets and smartphones. Until recently, it was perfectly sufficient to determine in advance whether touch events are supported and then listen, say touchstart/touchend instead of mousedown/mouseup. And everything worked great.
Today, hybrid devices such as the Microsoft Surface or some hybrid laptops/all-in-ones have gained some ground. Which, in addition to the usual mouse interface, also have a touch-screen. This allows you to use both input devices at the same time. And here comes the problem.
1. How can you determine that both input options are enabled in the browser at the same time?
2. What about backward compatibility when touch events also generate regular mouse events?
3. And in general, what are your thoughts on this?)

Answer 1

As a result, the following became clear: In some issues, MS is ahead of the rest. When working with the newest devices from MS, you need to use Pointer Events. This is done like this:
Check:

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

Everything is now usable. More or less like this:

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
My comrades use what they need.