touch---hammer.js

最新推荐文章于 2025-08-08 17:07:36 发布

ldaolong

最新推荐文章于 2025-08-08 17:07:36 发布

阅读量212

点赞数

CC 4.0 BY-SA版权

分类专栏： Others 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/ldaolong/article/details/84654653

Others 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个专为触摸手势设计的JavaScript库——hammer.js。它简化了为网页添加多点触摸事件的过程，如Tap、Swipe、Pinch等，并且支持桌面浏览器的鼠标事件模拟触摸操作。文中提供了一个具体的应用实例，展示了如何利用hammer.js实现页面元素的拖拽和缩放功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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