菜单

金沙国际运动端手势库Hammer.js学习,端手势库hammer.js

2019年5月4日 - 金沙前端

以为移动端原生协助的 touch、tap、swipe 多少个事件好像还不够用,有个别时候还会用到诸如缩放、长按等任何效用。

一抬手一动脚端手势库哈默.js学习,端手势库hammer.js

深感移动端原生辅助的 touch、tap、swipe 多少个事件好像还不够用,有些时候还会用到诸如缩放、长按等别的作用。

不久前学习了三个手势库 哈默.js,它是八个轻量级的触屏设备手势库,能识别出广大的触动、拖动、长按、缩放等作为。

 

依照 官方文档,开始学习吧

 

一、基本用法

在页面上用<script>标签引用  或将其下载应用

1. 页面结构:

 1     <style type="text/css">
 2         #test {
 3             overflow: hidden;
 4             margin: 50px auto;
 5             width: 300px;
 6             height: 300px;
 7             border: 1px solid #ccc;
 8         }
 9         .one,
10         .two {
11             float: left;
12             margin: 10px;
13             width: 100px;
14             height: 100px;
15             text-align: center;
16             line-height: 100px;
17             font-size: 32px;
18         }
19         .one {
20             background-color: #ccc;
21         }
22         .two {
23             background-color: #999;
24         }
25     </style>

  <div id="test">
        <div class="one">one</div>
        <div class="two">two</div>
    </div>

<script src="hammer.js"></script>

金沙国际 1

2. 简练的几句代码,监听滑动、长按事件

var hammerTest = new Hammer(document.getElementById('test'));
hammerTest.on('pan panmove swipe swipeup press pressup', function(ev) {
    console.log(ev.type);
});

金沙国际 2

 

2、事件分类及应用介绍

hammerTest.on('pan panstart panmove panend pancancel panleft panright panup pandown swipe swipeleft swiperight swipeup swipedown tap doubletap press pressup rotate rotatestart rotatemove rotateend rotatecancel pinch pinchstart pinchmove pinchend pinchcancel pinchin pinchout', function(ev) {
    console.log(ev.type);
});

1. pan类(平移)

垂直方向上的移位操作一般是用来滚动页面包车型客车,所以官方提议要注意一下

 

2. pinch类(捏拿缩放)

金沙国际,pinch 和 rotate 私下认可是不可用的,因为它们或然会招致成分被打断,要运用先

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

 

3. press类(按住)

 

4. rotate类(旋转)

 

5. swipe类(滑动)

笔直方向上的滑行操作一般是用来滚动页面的,所以swipe暗中同意下未开启up与down的轩然大波作为,要运用先安装方向

hammerTest.get('swipe').set({
    direction: Hammer.DIRECTION_ALL
});

中间,各方面对应值

金沙国际 3

 

陆. tap类(触碰点击)

 

7. 自定义

而外上述通过new 哈默(myElements, myOptions)
调用之外,哈默.js还辅助通过new 哈默.Manager(myElements,
myOptions)调用

后来人的myOptions参数实际上是个识别器recognizer,使用格局为

    var mc = new Hammer.Manager(document.getElementById('test'), {
            recognizers: [
                [Hammer.Rotate, {
                    enable: true
                }],
                [Hammer.Swipe, {
                    direction: Hammer.DIRECTION_ALL
                }],
                [Hammer.Pan]
            ]
        });

        mc.on('press pan rotate swipe', function(ev) {
            console.log(ev.type);
        });

那种办法还可用以自定义事件,比如

     mc.add(new Hammer.Tap({
            event: 'fourTap',
            taps: 4
        }));

        mc.on('fourTap', function(ev) {
            console.log(ev.type);
        });

连天点击四遍则触发该事件,其实,还足以设置越多参数,比如七遍点击之间的间距也可安装

金沙国际 4

个中,new 哈默.Tap(obj)
便是创造了3个鉴定区别器recognizer,并将该识别器增添至Manager中联合管理

 

3、事件触发的对象属性

其三方工具对事件的包裹,无非是应用到了原生的touch相关触摸事件,通过记录相应的坐标值变化,模拟出新的轩然大波表现

看望捏拿pinchin时的靶子属性

金沙国际 5

金沙国际 6

哈默.js提供了叁个hammer.input事件,它发出在每1个抽出中的交互中,让你能对原生的互相来做相关管理,用法如一般的风浪监听

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

金沙国际 7

 

肆、工具函数

Hammer.js还提供了有些实用的工具函数

如对事件监听的简便包装

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

简轻易单的类承继:

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();

 

总体可参考 文书档案

 

hammerJS是1个上佳的、轻量级的触屏设备手势库,今后早就更新到2.0④本子,跟1.0本子有点上下地别了,终究改写了事件名并新增加了成千上万办法,允许同时监听多少个手势、自定义识别器,也足以识别滑动方向。

近年学习了多少个手势库 Hammer.js,它是多少个轻量级的触屏设备手势库,能鉴定分别出周边的动手、拖动、长按、缩放等表现。

Hammer.on(element, types, handler)

Wrapper around addEventListener that accepts multiple event types.

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

可是对于新本子的hammerJS却连同缺少普通话指点文书档案,就着那点作者大概上 官网翻译下英文文书档案,写一篇跟我们大快朵颐吧 (其实hammer的API写的很不怎么着,内容和排版都相当粗心了事,建议先仔细商讨 examples 后再查阅。你也足以透过亚伦豨肉荣的哈默类别小说来学学) 

 

Hammer.off(element, types, handler)

Like Hammer.on, this is a wrapper around removeEventListener that
accepts multiple event types.

注:本文将具有API中涉嫌的 “input” 翻译为 “交互”,它实在包罗mousedown,
mousemove, touchmove, pointercancel事件。

依照 法定文书档案,初阶学习呢

Hammer.each(obj, handler)

Iterate an array or an object’s own properties.

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

GENERAL

 

Hammer.merge(obj1, obj2)

Merge properties from obj2 into obj1. Properties won’t be overwritten.

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]

开始

哈默JS是3个开源的库,能够辨认由 touch, mouse 和 pointer伊芙nts
触发的俯10地芥手势。它可怜小巧,压缩后仅有三.玖六kb,并未剩余的脚本重视。

你能够从 Github 上获取最新版的哈默JS,或然直接下载 压缩版 或
未压缩的开发版 的HammerJS源码。

点此 获取版本改变日志。

也可以 点这里 获取更旧的1.1本子。

二.0本子的退换:深透重写了源码,包罗可复用的辨别器 (recognizer) 、提高了对新型移动端浏览器可用的触摸行为css属性的支撑,另扶助了多少个hammer实例同时采取,让多用户同时采纳1台设备也不在话下。

一、基本用法

Hammer.extend(obj1, obj2)

Extend obj1 with the properties from obj2. Properties will be
overwritten.

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]

使用

哈默JS的采纳情势万分简单,只要将库引进到文件中,并创制三个新的实例就可以:

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

它会默感觉这几个目的增多1密密麻麻识别器,包涵 tap<点>,
doubletap<双点击>, press<按住>, 水平方面包车型大巴pan<平移> 和
swipe<快捷滑动>, 以及多触点的 pinch<捏放> 和
rotate<旋转>识别器。可是呢,当中的 pinch 和 rotate
私下认可是不可用的,因为它们恐怕会促成成分被封堵,假诺你想启用它们,能够加多那两句:

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

若要允许识别器度和胆识别垂直方位或任何方向的 pan 和 swipe,能够这么写:

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

另建议加上如下meta标签,幸免doubletap 或 pinch 缩放了viewport:

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

在页面上用<script>标签引用  或将其下载使用

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

Simple class inheritance.

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();

越多调整

你可以为您的实例设置属于您本身的识别器,即使要多写一些代码,但能让您调控更加多能被辨认的手势:

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);

上述的代码创立了一个实例(mc),它蕴涵了三个 pan 和二个 quadrupletap
手势,识别器实例会在它们被加上(add)之后就不绝于耳地实行,且(一个识别器实例)只可以识别七个(手势)。

一. 页面结构:

Hammer.bindFn(fn, scope)

Simple alternative for 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);

贴士和秘籍

 1     <style type="text/css">
 2         #test {
 3             overflow: hidden;
 4             margin: 50px auto;
 5             width: 300px;
 6             height: 300px;
 7             border: 1px solid #ccc;
 8         }
 9         .one,
10         .two {
11             float: left;
12             margin: 10px;
13             width: 100px;
14             height: 100px;
15             text-align: center;
16             line-height: 100px;
17             font-size: 32px;
18         }
19         .one {
20             background-color: #ccc;
21         }
22         .two {
23             background-color: #999;
24         }
25     </style>

  <div id="test">
        <div class="one">one</div>
        <div class="two">two</div>
    </div>

<script src="hammer.js"></script>

Hammer.prefixed(obj, name)

Get the (prefixed) property from the browser.

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

以为移动端原生支持的touch、tap、swipe多少个事件好像还不够用,有个别时候还会用到举例缩放、长…

一. 试着防止垂直方向上的 pan/swipe

笔直方向上的移动操作一般是用来滚动你的页面的,而且有个别(过时的)浏览器不会传递事件,导致哈默不能识别那么些手势。你能够品味换另1种可替换的门路来促成平等的动作。

金沙国际 8

二. 在配备上做测试

突发性哈默要求做一些调度,像swipe的速率或其余阈值,要是你在一台反应不快的器具上做测试,那么您要保管你的回调越轻易越好。有个别站点比方 JankFree.org上有专门的文章来介绍怎么着升高浮现效果。

二. 简约的几句代码,监听滑动、长按事件

三. 去掉Windows Phone点击时的高亮效果

您在Windows
Phone上的IE拾和IE1壹里tap某元素时,会有3个纤维的tap高亮效果,加上这一个meta标签能够收回那种功效:

<meta name="msapplication-tap-highlight" content="no" />
var hammerTest = new Hammer(document.getElementById('test'));
hammerTest.on('pan panmove swipe swipeup press pressup', function(ev) {
    console.log(ev.type);
});

四. “小编怎么选用不了文本了!”

哈默设置了叁性子质用来升高桌面平移操作的用户体验(UX)。常规来讲,当你在桌面级浏览器上拖动页面时,你应有是足以健康选汉语本的,但user-select那一个CSS属性禁止使用了那作用。如果你在意文本选取功效,同时感觉桌面级的心得没供给太十全十美,你能够很轻易地收回以此暗中认可选项——确定保证在创建实例在此之前实行:

delete Hammer.defaults.cssProps.userSelect;
  1. “在tap之后,导致触发了二个click事件,作者不想这么!”

那种click事件大家称为1个“幽灵点击”事件,小编创制了2个小函数来防止触摸后变成click,对此, Ryan
Fioravanti的文章 给了作者比极大的灵感。

金沙国际 9

浏览器/终端的支撑

决不顾忌您的浏览器或系列不在下方的列表上,Harmmer能够运维在除了IE八-的其它地点。浏览器若对入手行为(touch-action)提供原生帮衬,那么相比那么些不支持的浏览器,会有更加好的感受。查看 touch-action 页面驾驭更多。

金沙国际 10

金沙国际 11

 

实例

一. 基础实例

二. 垂直方向的pan识别器

三.
并且识别(用RecognizeWith落成)Pinch和Rotate

4.
用RecognizeWith操作Quadrupletap(自定义的,表示多少个tap)识别器

5. SingleTap<单点>和DoubleTap<双点击>(配合recognizeWith/requireFailure)

更加多实例可以查阅 github上的库文件 。

贰、事件分类及利用介绍

HAMMER

hammerTest.on('pan panstart panmove panend pancancel panleft panright panup pandown swipe swipeleft swiperight swipeup swipedown tap doubletap press pressup rotate rotatestart rotatemove rotateend rotatecancel pinch pinchstart pinchmove pinchend pinchcancel pinchin pinchout', function(ev) {
    console.log(ev.type);
});

常规API

Hammer

Hammer.defaults

Hammer.Manager

Hammer.Recognizer

Hammer.input event

Event object

Constants

Utils

1. pan类(平移)

==============================

Hammer

成立并赶回一个饱含类别暗中认可知别器集合的Manager实例,该会集内富含了举例 tap,
doubletap, pan, swipe, press, pinch 和 rotate
识别器。你应当在开首化时实行它,其语法为:

Contructor(HTMLElement, [options])

参数里3个是您的页面成分,另一个是可选的识别器选项options,options会融入哈默.defaults中去,当然,在哈默.defaults.preset中定义的识别器集结也会被加多进去。

假定识别器选项options为空,那么开始化的时候不会有额外的识别器被增添进去:

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

==============================

垂直方向上的移位操作一般是用来滚动页面包车型大巴,所以官方提议要注意一下

Hammer.defaults

开创实例时起先化的私下认可值,包蕴你定义的options选拔器项。其性质包蕴:

 

touchAction: ‘compute’

其值可为 compute, auto, pan-y,
pan-x
 或 none 。暗中认可选项会基于识别器为您选择3个准确值。

domEvents: false

让哈默也能禁止使用DOM事件。若不禁用会有个别慢,故暗中认可是禁止使用的。假如你想落成事件委托,那么提出你将其设为true。

enable: true

经受三个boolean值,
或重回一个boolean值的函数。(官方网站就那样一句话,也没说现实什么功用,汗~)

cssProps: {….}

能够改良彼此事件操作的多种css属性。越来越多详细情形能够查阅 JSDoc 。

preset: [….]

调用哈默()的时候就设置了暗中认可的识别器。如若建构三个新的Manager,那几个将被跳过。

==============================

贰. pinch类(捏拿缩放)

Hammer.Manager

Manager是怀有识别器实例的容器,它为你的因素设置了互动事件监听器,并设置了触摸事件天性。

constructor(HTMLElement, [options])

参数为你的要素(HTMLElement)和抉择(options),选项将联合到哈默.defaults中去:

var mc = new Hammer.Manager(myElement);

你能够在选择中选拔 recognizers
来设置一个早先化识别器,它是3个数组,写法如下:

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 });

pinch 和 rotate 私下认可是不可用的,因为它们或许会招致元素被打断,要利用先

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

丰裕七个新的Recognizer实例到Manager中,增添的次第跟识别器试行的次第二致。get方法会重返被抬高的Recognizer实例。

get和remove方法都把2个(识别器中的)事件名或识别器实例来作为二个参数。

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']);
hammerTest.get('pinch').set({
    enable: true
});
hammerTest.get('rotate').set({
    enable: true
});

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参数时,将强制登时结束识别器实施周期。

3. press类(按住)

destroy()

解绑全体交互事件并让manager失去功能,但它未有解绑任何dom事件监听器。

==============================

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图