Hammer.js移动端触摸手势JavaScript插件 - 资源分享

Hammer.js移动端触摸手势JavaScript插件

发布于 2017-07-04 字数 16881 浏览 2598 评论 0

Hammer.js是一个专门用于控制、定制手势的轻量级JavaScript框架,可以识别出常见的触摸、拖动、长按、缩放等手势。支持Android、BlackBerry、iOS及Windows触屏设备。

Hammer.js移动端控制和定制手势JavaScript插件

介绍

Hammer是一个开源免费的javascript插件,可以识别移动设备的触摸、拖放等操作,同时兼容PC个人电脑上面的鼠标点击和鼠标响应事件,他轻量级和简约,压缩版本就只有一个文件,大小为3.96K。

使用方法

Hammer非常易于使用和调用,只包括一个基本的js文件,下面是调用的一个基本实例。

var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
    console.log(ev);
});

默认情况下,它增加了一套tap, doubletap, press, 水平方向 panswipe,和多点触控中的pinchrotate 触发器。pinch 和rotate 的识别是默认情况下是禁用的因为他们会使闭锁元件,但你可以通过下面的方法调用:

hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

使垂直或所有方向的pan and swipe识别器:

hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

同时视口meta标签建议,它提供了更多的控制回网页禁用 doubletap/pinch。最近的浏览器支持触摸操作属性不需要这个。

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

更多的控制

你可以设置你的自己的一套识别您的实例。这需要更多的代码,但它给你的,被认可的手势更 控制。

var mc = new Hammer.Manager(myElement, myOptions);

mc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) );
mc.add( new Hammer.Tap({ event: 'quadrupletap', taps: 4 }) );

mc.on("pan", handlePan);
mc.on("quadrupletap", handleTaps);

上面的示例创建包含pan和一个quadrupletap手势。你 识别实例创建被他们添加的顺序执行,而只有一个可以同时识别。

See the pages about the recognizeWith and requireFailure for more details.

提示和技巧

事件代表团和DOM事件

Hammer是能够触发DOM事件与选项domevents:true。这将给你的方法stoppropagation(),所以你可以使用事件delgation。Hammer将不会解除绑定的事件。

尽量避免垂直平移/刷卡

垂直平移用于滚动页面,和一些(老)浏览器不发送事件所以Hammer不能够识别这些手势。一个选择会做同样的动作提供了另一种方式。

在一个真实的设备的测试

有时Hammer只需要一些微调,滑动速度或其他一些阈值一样。同时, 更好的性能在较慢的设备,你应该尽量简单 回调的可能。jankfree.org有篇关于如何提高性能。

删除Windows Phone的tap highlight

Windows手机上有一个小tap highlight IE11 IE10和突出,当你点击一个元素。添加meta标签 删除这个。

<meta name="msapplication-tap-highlight" content="no" />

无法选中文字

使用Hammer以后,用户无法通过长按选中网页中的文字,这和拖放的操作相违背。

如果你关心的文本选择和桌面的经验不多,你可以简单地删除 此选项从缺省值。确保你在创建一个实例。

浏览器/设备的支持

如果你的浏览器或操作系统不上市,别担心,它可能会工作吗! Internet Explorer 8以上不。

浏览器有触摸动作的原生支持可能改进的经验,然后浏览器看到 不行。触摸操作页更多的细节。

Browser Pan Pinch Press Rotate Swipe Tap Multi-user Touch-action
Windows Phone 8 – IE10
Android 2.3 – browser
Android 2.3 – FireFox
Android 4.x – browser
Android 4.4 – browser
Android 4 – Chrome
Android 4 – Opera ?
Android 4 – FireFox
Android 4 w/ mouse n/a
iOS 6
iOS 7
BlackBerry 10 ? ?
FireFox OS (simulator) ? ?
Desktop – IE11
Desktop – IE10
Desktop – IE9
Desktop – Chrome
Desktop – Firefox
Desktop – Opera ?
Chromebook ?
Windows 8 /w pen n/a
Windows 8 /w touch n/a
Windows 8 /w mouse n/a
Windows 8 /w mixed n/a

API文档

Hammer

创建并返回一个带有系列默认识别器集合的Manager实例,该集合内包含了诸如 tap, doubletap, pan, swipe, press, pinch 和 rotate 识别器。你应该在初始化时执行它,其语法为:

Contructor(HTMLElement, [options])

参数里一个是你的页面元素,另一个是可选的识别器选项options,options会融入Hammer.defaults中去,当然,在Hammer.defaults.preset中定义的识别器集合也会被添加进来。

如果识别器选项options为空,那么初始化的时候不会有额外的识别器被添加进来:

var myElement = document.getElementById('hitarea');
var mc = new Hammer(myElement);

Hammer.defaults

创建实例时初始化的默认值,包括你定义的options选择器项。其属性包括:

touchAction: ‘compute’

其值可为 compute, auto, pan-y, pan-xnone 。默认选项会基于识别器为你选择一个正确值。

domEvents: false

让Hammer也能禁用DOM事件。若不禁用会有些慢,故默认是禁用的。如果你想实现事件委托,那么建议你将其设为true。

enable: true

接受一个boolean值, 或返回一个boolean值的函数。(官网就这样一句话,也没说具体啥作用,汗~)

cssProps: {….}

可以改善交互事件操作的系列css属性。更多详情可以查阅JSDoc

preset: [….]

调用Hammer()的时候就安装了默认的识别器。如果建立一个新的Manager,这些将被跳过。

Hammer.Manager

Manager是所有识别器实例的容器,它为你的元素安装了交互事件监听器,并设置了触摸事件特性。

constructor(HTMLElement, [options])

参数为你的元素(HTMLElement)和选项(options),选项将合并到Hammer.defaults中去:

var mc = new Hammer.Manager(myElement);

你可以在选项中使用 recognizers 来设置一个初始化识别器,它是一个数组,写法如下:

var mc = new Hammer.Manager(myElement, {
    recognizers: [
        // RecognizerClass, [options], [recognizeWith, ...], [requireFailure, ...]
        [Hammer.Rotate],
        [Hammer.Pinch, { enable: false }, ['rotate']],
        [Hammer.Swipe,{ direction: Hammer.DIRECTION_HORIZONTAL }],
    ]
});

set(options)

修改一个Manager实例的选项,该方法是推荐使用的,它可以在需要的时候更新touchAction的值:

mc.set({ enable: true });

get(string), add(Recognizer) 和 remove(Recognizer)

添加一个新的Recognizer实例到Manager中,添加的顺序跟识别器执行的顺序一致。get方法会返回被添加的Recognizer实例。

get和remove方法都把一个(识别器中的)事件名或识别器实例来作为一个参数。Add 和 remove 方法也接受一个识别器数组来作为参数:

// both return instance of myPinchRecognizer
mc.get('pinch');
mc.get(myPinchRecognizer);
mc.add(myPinchRecognizer); // returns the recognizer
mc.add([mySecondRecogizner, myThirdRecognizer]);
mc.remove(myPinchRecognizer);
mc.remove('rotate');
mc.remove([myPinchRecognizer, 'rotate']);

on(events, handler) 和 .off(events, [handler])

监听由被添加的识别器触发的事件,或者移除那些绑定了的事件。参数中将事件通过空格隔开可处理多个事件:

mc.on("pinch", function(ev) {
    console.log(ev.scale);
});

stop([force])

停止当前交互会话的识别器(Stop recognizing for the current input session)。当使用force参数时,将强制立刻停止识别器执行周期。

destroy()

解绑所有交互事件并让manager失去作用,但它没有解绑任何dom事件监听器。

Hammer.Recognizer

每一个识别器都是从这个类中扩展出来的,所有识别器都会有一个enable选项,其值为boolean或者一个回调函数,用来启用/禁用非底层的识别器。

constructor([options])

只有选项作为参数:

var pinch = new Hammer.Pinch(); //创建一个识别器
mc.add(pinch); // 添加到Manager实例中

set(options)

在识别器实例中修改一个选项。该方法是推荐使用的,它可以在需要的时候更新touchAction的值。

recognizeWith(otherRecognizer) 和 dropRecognizeWith(otherRecognizer)

在当前识别器运行的时候同步运行所给的其它识别器(otherRecognizer),当你需要在最后结合pan和swipe手势时,或者需要同时pinch和ratate一个对象时,它会很有帮助。
移除这种联系时,只会移除当前识别器上的连接,而不是其它识别器(otherRecognizer)上的连接。
这两个方法都支持一个识别器组成的数组来作为参数。
如果识别器被添加到了Manager上,那么该方法也支持将其它识别器(otherRecognizer)的事件名(字符串形式)来作为参数。

了解更多recognizeWith

requireFailure(otherRecognizer) 和 dropRequireFailure(otherRecognizer)

只有当其它识别器(otherRecognizer)无效时才执行该识别器。
移除这种联系时,只会移除当前识别器上的连接,而不是其它识别器(otherRecognizer)上的连接。
这两个方法都支持一个识别器组成的数组来作为参数。
如果识别器被添加到了Manager上,那么该方法也支持将其它识别器(otherRecognizer)的事件名(字符串形式)来作为参数。

了解更多requireFailure

事件

hammer.input可以触发一个“秘密的”事件,它发生在每一个接收中的交互中,也让你能对原生的交互来做相关处理。它是一个小而强大的特性。

hammertime.on("hammer.input", function(ev) {
   console.log(ev.pointers);
});

事件对象

每一个Hammer触发的事件都会收到一个包含了如下属性的事件对象:

Hammer.js移动端触摸手势JavaScript插件

常量/Constants

这个建议查阅源码338行起,主要是用于标志事件轮廓,可通过上文“事件对象”的direction、offsetDirection等属性来获取。

所有常量都定义于Hammer对象中,因为它们都是二进制标识,你可以使用位运算来操作它们。MDN上有一些关于位运算的优秀文档

方位/Directions

用于定义一个识别器的方位,并用来读取一个事件的对应值。

Hammer.js移动端触摸手势JavaScript插件

交互事件/Input Events

Hammer匹配所有交互 (mousedown, mousemove, touchmove, pointercancel)事件类型为如下值:

Hammer.js移动端触摸手势JavaScript插件

识别器状态/Recognizer States

由识别器在内部定义自己的状态:

Hammer.js移动端触摸手势JavaScript插件

工具/Utils

Hammer.on(element, types, handler)

addEventListener的封装,可以接受多个事件类型为参数:

Hammer.on(window, "load resize scroll", function(ev) {
    console.log(ev.type);
});

Hammer.off(element, types, handler)

如同Hammer.on,是removeEventListener的封装,也允许多个事件类型为参数。

Hammer.each(obj, handler)

遍历一个数组或对象:

Hammer.each([10,20,30,40], function(item, index, src) { });
Hammer.each({a:10, b:20, c:30}, function(item, key, src) { });

Hammer.merge(obj1, obj2)

把obj2的属性混到obj1中去,不过obj1的已有属性不会被重写:

var options = {
    b: false
};

var defaults = {
    a: true,
    b: true,
    c: [1,2,3]
};
Hammer.merge(options, defaults);

// options.a == true
// options.b == false
// options.c == [1,2,3]

Hammer.extend(obj1, obj2)

把obj2的属性扩展到obj1中去,不过obj1的已有属性会被重写:

var obj1 = {
    a: true,
    b: false,
    c: [1,2,3]
};

var obj2 = {
    b: true,
    c: [4,5,6]
};
Hammer.extend(obj1, obj2);

// obj1.a == true
// obj1.b == true
// obj1.c == [4,5,6]

Hammer.inherit(child, base, [properties])

简单的类继承:

function Animal(name) {
    this.name = name;
}

function Dog() {
    Animal.apply(this, arguments);
}

Hammer.inherit(Dog, Animal, {
    bark: function() {
        alert(this.name);
    }
});

var dog = new Dog('Spaikie');
dog.bark();

Hammer.bindFn(fn, scope)

Function.bind的简化形式:

function myFunction(ev) {
    console.log(this === myContext); // is true
}

var myContext = {
    a: true,
    b: false
};

window.addEventListener('load', Hammer.bindFn(myFunction, myContext), false);

Hammer.prefixed(obj, name)

获取浏览器的(前缀)属性值:

Hammer.prefixed(document.body.style, 'userSelect');
// returns "webkitUserSelect" on Chrome 35

关于hammer的API就翻译到这里,剩余的几个页面内容篇幅较少也较好读懂,请自行查阅和理解。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

文江

文章 0 评论 0

2012013325

文章 0 评论 0

女中豪杰

文章 2 评论 0