Search code examples
jquerytouchmulti-touchpointer-events

3-fingers Multi-Touch Support in Web Apps


Is it possible to handle more than 2-finger touch events in Javascript? In my tests, events stop firing when a third finger is added. I created an example using jQuery and the official jQuery Plugin: Pointer Events Polyfill. Tested in Chrome and Microsoft Edge on Windows 10 Professional using a Wacom Cintiq 22HD Touch Monitor.

http://jsfiddle.net/po4a3e1L/2/

(function ($) {
    var pointers = [];

    $('#pointerTarget').on('pointerdown pointerover pointerenter', function (event) {
        var id = event.originalEvent.pointerId;
        if (!pointers[id]) {
            pointers[id] = $(`<div id="${id}"><p>pointerId: ${id}</p></div>`).appendTo('body');
        }
    });

    $('#pointerTarget').on('pointerup pointerout pointerleave', function (event) {
        var id = event.originalEvent.pointerId;
        if (pointers[id]) {
            pointers[id].remove();
            pointers.splice(id, 1);
        }
    });
})(jQuery);

Solution

  • This turned out to be an issue with my Wacom drivers. Under Touch Options there are two choices for Gesture Recognizer: Use Windows Gestures and Use Wacom Gestures. I had to select the former.