1、 Pan事件：在指定的dom區(qū)域內(nèi)晌砾，一個(gè)手指放下并移動(dòng)事件坎拐，即觸屏中的拖動(dòng)事件。這個(gè)事件在屏觸開發(fā)中比較常用养匈，如：左拖動(dòng)、右拖動(dòng)等都伪，如手要上使用QQ時(shí)向右滑動(dòng)出現(xiàn)功能菜單的效果呕乎。該事件還可以分別對以下事件進(jìn)行監(jiān)聽并處理：
Panstart：拖動(dòng)開始、Panmove：拖動(dòng)過程陨晶、Panend：拖動(dòng)結(jié)束猬仁、Pancancel：拖動(dòng)取消、Panleft：向左拖動(dòng)先誉、Panright：向右拖動(dòng)湿刽、Panup：向上拖動(dòng)、Pandown：向下拖動(dòng)
2褐耳、 Pinch事件：在指定的dom區(qū)域內(nèi)诈闺，兩個(gè)手指（默認(rèn)為兩個(gè)手指，多指觸控需要單獨(dú)設(shè)置）或多個(gè)手指相對（越來越近）移動(dòng)或相向（越來越遠(yuǎn)）移動(dòng)時(shí)事件铃芦。該事件事以分別對以下事件進(jìn)行監(jiān)聽并處理：
Pinchstart：多點(diǎn)觸控開始雅镊、Pinchmove：多點(diǎn)觸控過程、Pinchend：多點(diǎn)觸控結(jié)束刃滓、Pinchcancel：多點(diǎn)觸控取消仁烹、Pinchin：多點(diǎn)觸控時(shí)兩手指距離越來越近、Pinchout：多點(diǎn)觸控時(shí)兩手指距離越來越遠(yuǎn)
3咧虎、 Press事件：在指定的dom區(qū)域內(nèi)觸屏版本的點(diǎn)擊事件卓缰，這個(gè)事件相當(dāng)于PC端的Click事件，該不能包含任何的移動(dòng)，最小按壓時(shí)間為500毫秒征唬，常用于我們在手機(jī)上用的“復(fù)制捌显、粘貼”等功能。該事件分別對以下事件進(jìn)行監(jiān)聽并處理：
Pressup：點(diǎn)擊事件離開時(shí)觸發(fā)
4鳍鸵、 Rotate事件：在指定的dom區(qū)域內(nèi)苇瓣，當(dāng)兩個(gè)手指或更多手指成圓型旋轉(zhuǎn)時(shí)觸發(fā)（就像兩個(gè)手指擰螺絲一樣）。該事件分別對以下事件進(jìn)行監(jiān)聽并處理：
Rotatestart：旋轉(zhuǎn)開始偿乖、Rotatemove：旋轉(zhuǎn)過程击罪、Rotateend：旋轉(zhuǎn)結(jié)束、Rotatecancel：旋轉(zhuǎn)取消
5贪薪、 Swipe事件：在指定的dom區(qū)域內(nèi)媳禁，一個(gè)手指快速的在觸屏上滑動(dòng)。即我們平時(shí)用到最多的滑動(dòng)事件画切。
Swipeleft：向左滑動(dòng)竣稽、Swiperight：向右滑動(dòng)、Swipeup：向上滑動(dòng)霍弹、Swipedown：向下滑動(dòng)
6毫别、Tap事件：在指定的dom區(qū)域內(nèi)，一個(gè)手指輕拍或點(diǎn)擊時(shí)觸發(fā)該事件(類似PC端的click)典格。該事件最大點(diǎn)擊時(shí)間為250毫秒岛宦，如果超過250毫秒則按Press事件進(jìn)行處理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#myDiv{
width: 800px;
height: 800px;
background-color: red;
color:black;
text-align: center;
line-height: 400px;
margin: 200px auto;
font-size: 30px;
}
</style>
</head>
<body>
<div id="myDiv"></div>
</body>
<script src="Hammer.min.js"></script>
<!-- <script src="Hammer-time.min.js"></script> -->
<script>
var myDiv=document.getElementById('myDiv');
//創(chuàng)建一個(gè)新的hammer對象并且在初始化時(shí)指定要處理的dom元素
var hammertime = new Hammer(myDiv);
//為該dom元素指定觸屏移動(dòng)事件
// hammertime.add(new Hammer.Pinch());
hammertime.add(new Hammer.Rotate());
hammertime.on('pan', function(ev){
myDiv.style.backgroundColor="yellow";
myDiv.innerHTML="屏幕被滑動(dòng)了";
});
hammertime.on('tap', function(ev){
myDiv.style.backgroundColor="pink";
myDiv.innerHTML="屏幕被點(diǎn)擊了";
});
hammertime.on('pinch', function(ev){
myDiv.style.backgroundColor="blue";
myDiv.innerHTML="屏幕捏合被觸發(fā)";
myDiv.style.transform = "scale("+ev.scale+")";
// myDiv.style.transition="2s linear";
});
hammertime.on('press', function(ev){
myDiv.style.backgroundColor="gray";
myDiv.innerHTML="屏幕長按";
});
hammertime.on('rotate', function(ev){
myDiv.style.backgroundColor="green";
myDiv.innerHTML="兩個(gè)手指或更多手指成圓型旋轉(zhuǎn)";
});
hammertime.on('swipeleft', function(ev){
myDiv.style.backgroundColor="white";
myDiv.innerHTML="一個(gè)手指快速的在觸屏上滑動(dòng)";
});
// hammertime.on("panleft panright tap press", function(ev) {
// myDiv.textContent = ev.type +" gesture detected.";
// });
</script>
</html>