hammer.js test

hammer.js

by ocanal

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>
<div id=wrapper>
</div>

CSS

#wrapper {
    width: 300px;
    height: 300px;
    background-color: #efe;
    margin: 30px;
}

JavaScript

$(function() {

Hammer.plugins.fakeMultitouch();
Hammer.plugins.showTouches(true);
console.log('ran plugins');
    
var hammer = new Hammer(document.getElementById("wrapper"),{
        transform_always_block: true,
        transform_min_scale: 1,
        drag_block_horizontal: true,
        drag_block_vertical: true,
        drag_min_distance: 0    
});


hammer.on('tap', function(ev) {
     console.log('tap', ev);
});

hammer.on('pinch pinchin pinchout', function(ev) {
    console.log(ev.type, ev);
});

});






(function(Hammer) {
    /**
     * ShowTouches gesture
     * show all touch on the screen by placing elements at there pageX and pageY
     * @param   {Boolean}   [force]
     */
    Hammer.plugins.showTouches = function(force) {
        // the circles under your fingers
        var template_style = 'position:absolute;z-index:9999;left:0;top:0;height:14px;width:14px;border:solid 2px #777;' +
            'background:rgba(255,255,255,.7);border-radius:20px;pointer-events:none;' +
            'margin-top:-9px;margin-left:-9px;';

        // elements by identifier
        var touch_elements = {};
        var touches_index = {};

        /**
         * remove unused touch elements
         */
        function removeUnusedElements() {
            // remove unused touch elements
            for(var key in touch_elements) {
                if(touch_elements.hasOwnProperty(key) && !touches_index[key]) {
                    document.body.removeChild(touch_elements[key]);
                    delete touch_elements[key];
                }
            }
        }

        Hammer.detection.register({
            name: 'show_touches',
            priority: 0,
            handler: function(ev, inst) {
                touches_index = {};

                // clear old elements when not using a mouse
                if(ev.pointerType != Hammer.POINTER_MOUSE && !force) {
                    removeUnusedElements();
                    return;
                }

            ...