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.com/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.com/hammer.js/jquery.hammer.js"></script> $("#element") .hammer({ // 对DOM进行一些初始化,这里可以加入一些参数 }) .bind("tap", function(ev) { console.log(ev); });
官网地址: http://eightmedia.github.com/hammer.js/ (带演示)
源码地址: https://github.com/EightMedia/hammer.js