touch---hammer.js

hammer.js 是一个多点触摸手势库，能够 为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件 ，免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。hammer.js不但支持触摸屏设备的浏览器，在桌面浏览器上，也能将鼠标的点击当做触摸，方便开发人员在桌面浏览器上调试。 这是一个专为触摸手势而生的js库。

 

开发中的简单例子：

export class FlowsheetControls {

    domElement: HTMLElement;

    enabled = true;

 

    constructor(dragDiv: any, flowsheet: any) {

        this.domElement = dragDiv;

 

        var hammertime = new Hammer.Instance(this.domElement, {

            transform_always_block: true,

            transform_min_scale: 0.1,

            drag_block_horizontal: true,

            drag_block_vertical: true,

            drag_min_distance: 0,

        });

 

        //var prev_zoom = 0;

        var scale = flowsheet.getZoomScale(), last_scale = scale;

        hammertime.on('touch drag transform', function (ev) {            

            switch (ev.type) {

                case 'touch':

                    //last_scale = scale;

                    break;

                case 'drag':

                    dragDiv.scrollTop = dragDiv.scrollTop - (ev.gesture.deltaY / 10);

                    dragDiv.scrollLeft = dragDiv.scrollLeft - (ev.gesture.deltaX / 10);

                    break;

                case 'transform':

                    var zoomSize = Math.max(0.08, Math.min(last_scale * ev.gesture.scale, 3));

                    flowsheet.setZoomScale(zoomSize);

                    last_scale = zoomSize;

                    break;

            }

        });

 

    }

}

 

使用方法：

<script src="http://eightmedia.github/hammer.js/hammer.js"></script>

// 先要对监听的DOM进行一些初始化
var hammer = new Hammer(document.getElementById("container"));

// 然后加入相应的回调函数即可
hammer.ondragstart = function(ev) { };  // 开始拖动
hammer.ondrag = function(ev) { }; // 拖动中
hammer.ondragend = function(ev) { }; // 拖动结束
hammer.onswipe = function(ev) { }; // 滑动

hammer.ontap = function(ev) { }; // 单击
hammer.ondoubletap = function(ev) { }; //双击
hammer.onhold = function(ev) { }; // 长按

hammer.ontransformstart = function(ev) { }; // 双指收张开始
hammer.ontransform = function(ev) { }; // 双指收张中
hammer.ontransformend = function(ev) { }; // 双指收张结束

hammer.onrelease = function(ev) { }; // 手指离开屏幕

还支持jQuery插件的形式调用

<script src="http://eightmedia.github/hammer.js/jquery.hammer.js"></script>

$("#element")
   .hammer({
        // 对DOM进行一些初始化，这里可以加入一些参数
   })
   .bind("tap", function(ev) {
        console.log(ev);
   });

官网地址： http://eightmedia.github/hammer.js/   （带演示） 
源码地址： https://github/EightMedia/hammer.js