Pointer Events Example

Using jQuery Pointer Events Polyfill (PEP.js)

HTML

<script src="https://code.jquery.com/pep/0.3.0/pep.js"></script>
<div id="pointerTarget" touch-action="none"></div>

CSS

#pointerTarget {
    width: 100%;
    height: 200px;
    background: lightgray;
}

JavaScript

(function ($) {
    var pointers = [];
    
    $('#pointerTarget').on('pointerdown pointerover pointerenter', function (event) {
        var id = event.originalEvent.pointerId;
        if (!pointers[id]) {
            pointers[id] = $(`<p>pointerId: ${id}</p>`).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);