PC端的基本事件：
鼠標事件：click mouseover mouseout mouseenter瀏覽器能夠阻止其默認的冒泡機制 mouseleave
mousemove mousedown mouseup mousewheel滾輪事件 load scroll blur focus change
鍵盤事件： keydown keyup
移動端的基本事件：
click load scroll blur focus change input（代替keydown keyup）..... touch事件模型（處理單手指操作） gesture（處理多手指操作）
移動端要操作的行爲很多（長按 雙擊 放大 縮小 旋轉 搖一搖 重力感應），但是移動端並沒有給我們提供這個操作的事件類型，要我們自己來處理這些事件，一般用touch和cesture事件模型組合實現
touch事件模型：touchstart（手指摁下的時候） touchmove（手指在屏幕上滑動） touchend（手指離開屏幕的時候） touchcancle（出現異常情況，一般不用） 移動端標準事件
gesture事件模型：gesturestart gestureend gesturechange
click：
在移動端click屬於單擊事件，不是點擊事件，在移動端的項目中，我們經常會區分單擊做什麼，雙擊做什麼，所以移動端的瀏覽器再識別click的時候，只有確定是單擊後纔會把它執行。
在移動端使用click會存在300ms的延遲，瀏覽器會在第一次點擊結束後，還需要等到300ms看是否觸發了第二次點擊，如果觸發了第二次點擊就不屬於click了，沒有觸發第二次點擊才屬於click
// 移動端使用click方法會存在300ms的延遲
var oBox = document.querySelector('.box');
oBox.addEventListener('click',function () {
this.style.webkitTransform = 'rotate(360deg)';
},false);如果想解決300ms的延遲問題，就使用touchstart touchmove touchend自己進行模擬就可以了
首先console.log查看一下ev裏面包含了什麼東西
ev：TouchEvent => 裏面有我們熟悉的type，preventDefault(returnValue)，stopPropagation(cancelBubble)，changedTouches，touches
其中，changedTouches和touches都是手指信息的集合（TouchList），touch獲取到的值得必備條件只有手指還在屏幕上纔可以獲取，所以在touchend事件中如果想獲取離開的瞬間座標，只能使用changedTouches獲取
在移動端使用touch模型，則不會直接得到clientX，需要用ev.touch[0].clientX來獲取
<script type="text/javascript">
//解決300ms延遲問題方法1，使用touch模型實現點擊操作（單擊&&雙擊）
var oBox = document.querySelector('.box');
function on(curEle, type, fn) {
curEle.addEventListener(type, fn);
}
on(oBox, 'touchstart', function (ev) {
var point = ev.touches[0];
this['staX'] = point.clientX;
this['staY'] = point.clientY;
this['isMove'] = false;
});
on(oBox, 'touchmove', function (ev) {
var point = ev.touches[0];
var newX = point.clientX,
newY = point.clientY;
// 判斷是否發生滑動，我們需要判斷偏移的值是否在30px之內
if (Math.abs(newX - this['staX']) > 30 || Math.abs(newY - this['staY']) > 30) {
this['isMove'] = true;
}
});
on(oBox, 'touchend', function (ev) {
//點擊，實現可以連續的點擊旋轉原理：定義一個定時器，當用1s時間旋轉到360°的時候，
// 立刻讓盒子的位置變爲0°，由於有1s的動畫效果，點擊之後就會1s實現一次動畫無限自動旋轉
// 所以需要在定時器中讓0°時候，也讓動畫的持續時間變爲0，當再次點擊的時候持續時間變爲1
if (this['isMove'] === false) {
this.style.transitionDuration = '1s';
this.style.webkitTransform = 'rotate(360deg)';
window.setTimeout(function () {
this.style.transitionDuration = '0s';
this.style.webkitTransform = 'rotate(0deg)';
}.bind(this),1000);
} else {//滑動
this.style.background = 'red';
}
});
</script><script type="text/javascript" src="js/fastClick.js"></script>
<script type="text/javascript">
//解決300ms延遲問題,使用fastClick.js文件
FastClick.attach(document.body);
// 移動端使用click方法會存在300ms的延遲
var oBox = document.querySelector('.box');
oBox.addEventListener('click', function () {
this.style.transitionDuration = '1s';
this.style.webkitTransform = 'rotate(360deg)';
window.setTimeout(function () {
this.style.transitionDuration = '0s';
this.style.webkitTransform = 'rotate(0deg)';
}.bind(this),1000);
}, false);
</script>頁面的HTML和CSS
<div class="box"></div><head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>移動端事件click</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
overflow: hidden;
background: #eee;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background: lightblue;
-webkit-transition: all 1s linear 0s;
transition: all 1s linear 0s;
}
</style>
</head>總結：
點擊，單擊，雙擊，長按，滑動，左滑，右滑，上滑。下滑....
單擊和雙擊，相差300ms
點擊和長按，相差750ms
點擊和滑動，X/Y軸偏移的距離是否在30px之內，超過就是滑動
左右滑動和上下滑動，X軸偏移的距離 > Y軸偏移的距離 = 左右滑 反之，上下滑
左滑和右滑，偏移的距離 > 0 = 右滑，反之左滑
