移動端腳本框架Hammer.js
一、前言
移動端框架當前還處在初級階段，但相對于移動端的應用來說已經(jīng)有很長時間了。雖然暫時還沒有PC端開發(fā)的需求量大，但移動端的Web必然是一種趨勢，在接觸移動端腳本的過程中，最開始想到的是juqery。Jquery2.0版本及以上已經(jīng)開始偏向移動端，如對h5的支持，但支持還是不夠完善，希望jq在后面的版本能夠逐漸支持起來。
最初在開發(fā)移動端Web的時候使用w3c標準的語法結(jié)構(gòu)和原生的js開發(fā)，但相對來說開發(fā)量比較大，而且每一步都要考慮各移動端瀏覽器的兼容，像比較讓程序員頭痛的大wp手機，很多事件都向w3c申請單獨的標準。因此一個好的兼容性架構(gòu)對于開發(fā)者來說可以節(jié)省很大一部分工作量。
剛開始接觸移動端框架之初也問了一些一直搞前端的朋友，大部份都在百度阿里等工作。參考大家的建議后我們做項目使用了zepto.js（很多搞前端的朋友應該并不陌生）。這個框架有個很大的問題就是不兼容wp手機，使用zepto.js開發(fā)完項目后，再針對wp手機兼容做調(diào)整總感覺有些“得不償失”，后來咨詢了些朋友，他們所在的公司在開發(fā)的時候基本都放棄wp的兼容（我只能對wp說“呵呵”了）。后面就咨詢到有用hammer.js進行開發(fā)的。我們研究了下，hammer.js輕量級，封裝的也比較好。用起來也很方便。兼容性也不錯。但網(wǎng)上中文資料比較少，園子寫hammer的就更少了。因此有了這篇文章。
此文章基于hammer.js 官網(wǎng)：http://hammerjs.github.io/ ，版本基于v2.0.4。如果該文章的api已過期，請自行到官網(wǎng)查詢最新api。此文章只做入門使用。
二、hammer.js是什么
hammer.js是一款開源的移動端腳本框架，他可以完美的實現(xiàn)在移端開發(fā)的大多數(shù)事件，如：點擊、滑動、拖動、多點觸控等事件。不需要依賴任何其他的框架，并且整個框架非常小，\在使用時非常簡單，代碼示例如下：
<div id="test" class="test"></div>
<script type="text/javascript">
//創(chuàng)建一個新的hammer對象并且在初始化時指定要處理的dom元素
var hammertime = new Hammer(document.getElementById("test"));
//為該dom元素指定觸屏移動事件
hammertime.on("pan", function (ev) {
//控制臺輸出
console.log(ev);
});
</script>
三、事件架構(gòu)
hammer.js主要針對觸屏的6大事件進行監(jiān)聽。如下圖所示：
1、Pan事件：在指定的dom區(qū)域內(nèi)，一個手指放下并移動事件，即觸屏中的拖動事件。這個事件在屏觸開發(fā)中比較常用，如：左拖動、右拖動等，如手要上使用QQ時向右滑動出現(xiàn)功能菜單的效果。該事件還可以分別對以下事件進行監(jiān)聽并處理：Panstart：拖動開始、Panmove：拖動過程、Panend：拖動結(jié)束、Pancancel：拖動取消、Panleft：向左拖動、Panright：向右拖動、Panup：向上拖動、Pandown：向下拖動。
2、Pinch事件：在指定的dom區(qū)域內(nèi)，兩個手指（默認為兩個手指，多指觸控需要單獨設置）或多個手指相對（越來越近）移動或相向（越來越遠）移動時事件。該事件事以分別對以下事件進行監(jiān)聽并處理：Pinchstart：多點觸控開始、Pinchmove：多點觸控過程、Pinchend：多點觸控結(jié)束、Pinchcancel：多點觸控取消、Pinchin：多點觸控時兩手指距離越來越近、Pinchout：多點觸控時兩手指距離越來越遠。
3、Press事件：在指定的dom區(qū)域內(nèi)觸屏版本的點擊事件，這個事件相當于PC端的Click事件，該不能包含任何的移動，最小按壓時間為500毫秒，常用于我們在手機上用的“復制、粘貼”等功能。該事件分別對以下事件進行監(jiān)聽并處理： Pressup：點擊事件離開時觸發(fā)。
4、Rotate事件：在指定的dom區(qū)域內(nèi)，當兩個手指或更多手指成圓型旋轉(zhuǎn)時觸發(fā)（就像兩個手指擰螺絲一樣）。該事件分別對以下事件進行監(jiān)聽并處理：Rotatestart：旋轉(zhuǎn)開始、Rotatemove：旋轉(zhuǎn)過程、Rotateend：旋轉(zhuǎn)結(jié)束、Rotatecancel：旋轉(zhuǎn)取消。
5、Swipe事件：在指定的dom區(qū)域內(nèi)，一個手指快速的在觸屏上滑動。即我們平時用到最多的滑動事件。Swipeleft：向左滑動、Swiperight：向右滑動、Swipeup：向上滑動、Swipedown：向下滑動。
6、Tap事件：在指定的dom區(qū)域內(nèi)，一個手指輕拍或點擊時觸發(fā)該事件(類似PC端的click)。該事件最大點擊時間為250毫秒，如果超過250毫秒則按Press事件進行處理。
經(jīng)驗分享：寫到這個事件的時候有人必然要問了，在觸屏中我們使用Click事件不也可以嗎？這個Tap事件與Click事件有什么區(qū)別呢？博主也曾經(jīng)有過這樣的疑惑，起初在觸屏上處理點擊的時候也一直用的click事件，并且沒也有出現(xiàn)任何問題，直到有一天為一個公司做了微信版本的“連連看”小游戲，連連看的業(yè)務簡單來說就是屏幕上有很多圖片，當點擊兩個相同圖案的圖片時可以在中間產(chǎn)生連接線，并且產(chǎn)生爆破效果后消失。這個游戲剛開始做的時候是在ff瀏覽器上做的測試，鼠標點擊后效果非常流暢，但當游戲部署到服務器上并用手機端操作時，iphone和wp都非常流暢，安卓下不管怎么調(diào)都是有卡頓。起初以為是手機性能的問題，但換了高配手機后仍然會有卡頓，游戲也不是不能玩，就是反應慢。經(jīng)過多次的測試后排除了手機配置的硬件原因，開始懷疑click事件。經(jīng)過網(wǎng)上查閱后才得知，在安卓觸屏上，Tap事件和click事件可以同時觸發(fā)，但click事件會有幾百毫秒的延遲，即先觸發(fā)Tap事件，過一段時間再觸發(fā)click事件。后來把游戲的所有click事件修改成Tap事件問題就自然解決了。
四、 使用實例
1、 Pan
代碼如下
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Pan</title>
<script src="/Script/hammer.js"></script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.test {
width: 100%;
height: 50%;
background: #ffd800;
text-align: left;
}
.result {
width: 100%;
height: 50%;
background: #b6ff00;
text-align: left;
}
</style>
</head>
<body>
<div id="test" class="test">事件區(qū)域</div>
<div id="result" class="result">事件結(jié)果<br /></div>
<script type="text/javascript">
//創(chuàng)建一個新的hammer對象并且在初始化時指定要處理的dom元素
var hammertime = new Hammer(document.getElementById("test"));
//添加事件
hammertime.on("pan", function (e) {
document.getElementById("result").innerHTML += "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />";
//控制臺輸出
console.log(e);
});
</script>
</body>
</html>
效果如下：
2、Pinch
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Pinch</title>
<script src="/Script/hammer.js"></script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.test {
width: 100%;
height: 50%;
background: #ffd800;
text-align: left;
}
.result {
width: 100%;
height: 50%;
background: #b6ff00;
text-align: left;
}
</style>
</head>
<body>
<div id="test" class="test">事件區(qū)域</div>
<div id="result" class="result">事件結(jié)果：捏合觸發(fā)<br /></div>
<script type="text/javascript">
//創(chuàng)建一個新的hammer對象并且在初始化時指定要處理的dom元素
var hammertime = new Hammer(document.getElementById("test"));
//為該dom元素指定觸屏移動事件
hammertime.add(new Hammer.Pinch());
//添加事件
hammertime.on("pinchin", function (e) {
document.getElementById("result").innerHTML += "捏合初觸發(fā)<br />";
//控制臺輸出
console.log(e);
});
</script>
</body>
</html>
效果如下：
3、Press
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Press</title>
<script src="/Script/hammer.js"></script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.test {
width: 100%;
height: 50%;
background: #ffd800;
text-align: left;
}
.result {
width: 100%;
height: 50%;
background: #b6ff00;
text-align: left;
}
</style>
</head>
<body>
<div id="test" class="test">事件區(qū)域</div>
<div id="result" class="result">事件結(jié)果：按壓超過500ms觸發(fā)<br /></div>
<script type="text/javascript">
//創(chuàng)建一個新的hammer對象并且在初始化時指定要處理的dom元素
var hammertime = new Hammer(document.getElementById("test"));
//添加事件
hammertime.on("press", function (e) {
document.getElementById("result").innerHTML += "超過500ms了<br />";
//控制臺輸出
console.log(e);
});
</script>
</body>
</html>
效果如下：
4、Rotate
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Rotate</title>
<script src="/Script/hammer.js"></script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.test {
width: 100%;
height: 50%;
background: #ffd800;
text-align: left;
}
.result {
width: 100%;
height: 50%;
background: #b6ff00;
text-align: left;
}
</style>
</head>
<body>
<div id="test" class="test">事件區(qū)域</div>
<div id="result" class="result">事件結(jié)果：旋轉(zhuǎn)觸發(fā)<br /></div>
<script type="text/javascript">
//創(chuàng)建一個新的hammer對象并且在初始化時指定要處理的dom元素
var hammertime = new Hammer(document.getElementById("test"));
//為該dom元素指定觸屏移動事件
hammertime.add(new Hammer.Rotate());
//添加事件
hammertime.on("rotate", function (e) {
document.getElementById("result").innerHTML += "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />";
//控制臺輸出
console.log(e);
});
</script>
</body>
</html>
效果如下：
5、Swipe
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Swipe</title>
<script src="/Script/hammer.js"></script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.test {
width: 100%;
height: 50%;
background: #ffd800;
text-align: left;
}
.result {
width: 100%;
height: 50%;
background: #b6ff00;
text-align: left;
}
</style>
</head>
<body>
<div id="test" class="test">事件區(qū)域</div>
<div id="result" class="result">事件結(jié)果：向左滑動觸發(fā)<br /></div>
<script type="text/javascript">
//創(chuàng)建一個新的hammer對象并且在初始化時指定要處理的dom元素
var hammertime = new Hammer(document.getElementById("test"));
//添加事件
hammertime.on("swipeleft", function (e) {
document.getElementById("result").innerHTML += "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />";
//控制臺輸出
console.log(e);
});
</script>
</body>
</html>
效果如下：
6、Tab
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Tap</title>
<script src="/Script/hammer.js"></script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.test {
width: 100%;
height: 50%;
background: #ffd800;
text-align: left;
}
.result {
width: 100%;
height: 50%;
background: #b6ff00;
text-align: left;
}
</style>
</head>
<body>
<div id="test" class="test">事件區(qū)域</div>
<div id="result" class="result">事件結(jié)果：點擊觸發(fā)<br /></div>
<script type="text/javascript">
//創(chuàng)建一個新的hammer對象并且在初始化時指定要處理的dom元素
var hammertime = new Hammer(document.getElementById("test"));
//添加事件
hammertime.on("tap", function (e) {
document.getElementById("result").innerHTML += "點擊觸發(fā)了，長按無效<br />";
//控制臺輸出
console.log(e);
});
</script>
</body>
</html>
效果如下：
上述的實例還是有所區(qū)別的。在Pinch事件和Rotate事件中，我們用了hammertime.add(new Hammer.Pinch());和hammertime.add(new Hammer.Rotate ());而其他四個事件沒有用，而是直接添加了事件的監(jiān)聽程序。原因在于，我們在new Hammer(htmlElement)的時候，Hammer.js默認對Pan、Press、Swipe和Tab事件進行了監(jiān)聽。但沒有對Pinch和Rotate事件進行監(jiān)聽。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
首先apply和call是老生常談的東西，但是對于bind，我愣了下，因為這個詞是jquery中使用頻率很高的一個方法，用來給DOM元素綁定事件用的2011-10-10
這篇文章主要給大家介紹了關(guān)于JS對象數(shù)組排序方法測試的相關(guān)資料,在 相信大家對數(shù)組排序都不陌生,在開發(fā)中我們通常會使用sort方法進行數(shù)組的排序,需要的朋友可以參考下2024-06-06
網(wǎng)站發(fā)布后Bootstrap框架引用woff字體無法正常顯示的解決方法
這篇文章主要介紹了網(wǎng)站發(fā)布到IIS后Bootstrap框架引用的woff字體無法正常顯示的解決方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
本文給大家分享在Perl中使用WWW::Curl庫編寫爬蟲程序的步驟和方法,感興趣的朋友跟隨小編一起看看吧2025-03-03
微信小程序?qū)崿F(xiàn)計時器開始和結(jié)束功能
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)計時器開始和結(jié)束功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了JavaScript字符串對象(string)基本用法,結(jié)合實例形式分析了js字符串的添加、計算、獲取、替換等操作實現(xiàn)技巧,需要的朋友可以參考下2017-01-01
跨瀏覽器開發(fā)經(jīng)驗總結(jié)（三） 警惕“IE依賴綜合癥”
跨瀏覽器開發(fā)經(jīng)驗總結(jié)（三） 警惕“IE依賴綜合癥”2010-05-05
用js實現(xiàn)的一個根據(jù)內(nèi)容自動生成表格的函數(shù)
用js實現(xiàn)的一個根據(jù)內(nèi)容自動生成表格的函數(shù)...2007-08-08
JavaScript面試必考之實現(xiàn)手寫Promise
Promise作為面試必考題，Promise的手寫也是面試官必問的問題，所以對于Promise我們一定要了解透徹。本文就為大家整理了手寫Promise的示例代碼，需要的可以參考一下2022-12-12
支持FIREFOX IE7 IE6 周未就為了這個小效果，折騰死人了！找了很多的代碼都不行，不是不支持FIREFOX，就是對HTML和XHTML有要求！2008-04-04