移動端手勢庫Hammer.js學習

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

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

 

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

 

一、基本用法

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

1. 頁面結構：

    <style type="text/css">
        #test {
            overflow: hidden;
            margin: 50px auto;
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
        }
        .one,
        .two {
            float: left;
            margin: 10px;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 32px;
        }
        .one {
            background-color: #ccc;
        }
        .two {
            background-color: #999;
        }
    </style>

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

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

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

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

 

二、事件分類及使用介紹

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中統一管理

 

三、事件觸發的對象屬性

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

看看捏拿pinchin時的對象屬性

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

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

 

四、工具函數

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