Pointer Events Example

Using jQuery Pointer Events Polyfill (PEP.js)

by pedro_g_s

HTML

<script src="https://code.jquery.com/pep/0.3.0/pep.js"></script>
<div id="pointerTarget"></div>
<span id="test">p</span>

CSS

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

JavaScript

(function ($){
    var $target = $('#pointerTarget');
    
    $target.on('pointerdown', pointerHandler);
    $target.on('pointerup', pointerHandler);
    $target.on('pointermove', pointerHandler);
    $target.on('pointerover', pointerHandler);
    $target.on('pointerout', pointerHandler);
    $target.on('pointerenter', pointerHandler);
    $target.on('pointerleave', pointerHandler);
    
    function pointerHandler(event)
    {
        console.log(event.buttons);
        document.getElementById("test").innerHTML = event.buttons;
    }
})(jQuery);