移動端手勢庫Hammer.js學習

時間 2019-12-05

標籤移動手勢 hammer.js hammer 學習欄目無線简体版

原文原文鏈接

感受移動端原生支持的 touch、tap、swipe 幾個事件好像還不夠用，某些時候還會用到諸如縮放、長按等其餘功能。css

近日學習了一個手勢庫 Hammer.js，它是一個輕量級的觸屏設備手勢庫，能識別出常見的觸摸、拖動、長按、縮放等行爲。html

依照官方文檔，開始學習吧git

1、基本用法github

在頁面上用<script>標籤引用 http://hammerjs.github.io/dist/hammer.min.js 或將其下載使用web

1. 頁面結構：api

 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>

2. 簡單的幾句代碼，監聽滑動、長按事件app

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

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類（平移）工具

pan
panstart
panmove
panend
pancancel
panleft
panright
panup
pandown

垂直方向上的平移操做通常是用來滾動頁面的，因此官方建議要注意一下學習

2. pinch類（捏拿縮放）

pinch
pinchstart
pinchmove
pinchend
pinchcancel
pinchin
pinchout

pinch 和 rotate 默認是不可用的，由於它們可能會致使元素被卡住，要使用先

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

3. press類（按住）

press
pressup

4. rotate類（旋轉）

rotate
rotatestart
rotatemove
rotateend
rotatecancel

5. swipe類（滑動）

swipe
swipeleft
swiperight
swipeup
swipedown

垂直方向上的滑動操做通常是用來滾動頁面的，因此swipe默認下未開啓up與down的事件行爲，要使用先設置方向

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

其中，各方位對應值

6. tap類(觸碰點擊）

tap
doubletap

7. 自定義

除了上述經過new Hammer(myElements, myOptions) 調用以外，Hammer.js還支持經過new Hammer.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);
        });

連續點擊四次則觸發該事件，其實，還能夠設置更多參數，好比四次點擊之間的間隔也可設置

其中，new Hammer.Tap(obj) 就是建立了一個識別器recognizer,並將該識別器添加至Manager中統一管理

3、事件觸發的對象屬性

第三方工具對事件的封裝，無非是使用到了原生的touch相關觸摸事件，經過記錄相應的座標值變化，模擬出新的事件行爲

看看捏拿pinchin時的對象屬性

Hammer.js提供了一個hammer.input事件，它發生在每個接收中的交互中，讓你能對原生的交互來作相關處理，用法如通常的事件監聽

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

4、工具函數

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

完整可參考文檔

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

Hammer.off(element, types, handler)

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

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

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]

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]

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

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

Hammer.prefixed(obj, name)

Get the (prefixed) property from the browser.

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。