移動互聯網是未來的發展趨勢，現在國內很多互聯網大佬都在爭取移動這一塊大餅，如微信及支付寶是目前比較成功的例子，當然還有各種APP和web運用。
由於公司的需要，最近也在開發移動web，對於一個沒有移動開發經驗的人來說，其實也是比較困惱的一件事情。對於移動web開發目前主要是基於webkit內核的瀏覽器。在webkit內核的環境下開發，你可以充分的運用html5+css3，還有它的一些私有屬性。這讓我很興奮。可是，畢竟，對於一個長期習慣pc端做固定像素開發的前端，突然轉為移動端運用html5+css3及響應式開發，還真有點不適應。更不用說移動的一些觸摸事件及一些觸摸手勢之類。這些對於一個門外漢來說還真有點蒙。
不過，知識總是有個熟悉的過程，我也相信自個能學好移動web的開發技術。下面是我對移動端的一些輕觸事件的學習。不過對於有移動開發經驗的人來說，下面我寫的知識可能比較膚淺，這樣的話，你可以跳過本文章；對於和我一樣沒啥基礎的，可以好好閱讀完。
在webkit內的觸摸事件主要有以下幾個：
touchstart---->觸摸開始
touchmove----->接觸點改變
touchend------>觸摸結束
touchcancel--->觸摸取消
下面我主要針對我日常用的比較多的touchstart,touchend兩個事件進行封裝，使得其像jQuery類庫一樣方便使用。
代碼如下：
首先是touchEvent.js文件
(function(window, undefined){
var TOUCHSTART, TOUCHEND;
if (typeof(window.ontouchstart) != 'undefined') {
TOUCHSTART = 'touchstart';
TOUCHEND = 'touchend';
} else if (typeof(window.onmspointerdown) != 'undefined') {
TOUCHSTART = 'MSPointerDown';
TOUCHEND = 'MSPointerUp';
} else {
TOUCHSTART = 'mousedown';
TOUCHEND = 'mouseup';
}
function NodeFacade(node){
this._node = node;
}
NodeFacade.prototype.getDomNode = function() {
return this._node;
}
NodeFacade.prototype.on = function(evt, callback) {
if (evt === 'tap') {
this._node.addEventListener(TOUCHSTART, callback);
} else if (evt === 'tapend') {
this._node.addEventListener(TOUCHEND, callback);
} else {
this._node.addEventListener(evt, callback);
}
return this;
}
NodeFacade.prototype.off = function(evt, callback) {
if (evt === 'tap') {
this._node.removeEventListener(TOUCHSTART, callback);
} else if (evt === 'tapend') {
this._node.removeEventListener(TOUCHEND, callback);
} else {
this._node.removeEventListener(evt, callback);
}
return this;
}
window.$ = function(selector) {
var node = document.querySelector(selector);
if(node) {
return new NodeFacade(node);
} else {
return null;
}
}
})(window);
其次在頁面中引用該js文件
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="touchEvent.js"></script>
</head>
<body>
<input type="button" class="button" value="button" />
<script type="text/javascript">
$('.button').on('tap', function(e) {
e.preventDefault();
alert('tap');
}).on('tapend', function(e) {
alert('tapend');
});
</script>
</body>
</html>
以上，就是在學習移動端事件的小小成果。移動端的知識不比pc簡單，所以要有耐心去學習，知識才會一點點的積累。