FastClick
現在有現成的插件fastclick可以解決這個問題，但是也有弊端：
GitHub上最新版本的插件大小為25.4kb，輕量為趨勢，能省則省。
它的核心思想是取消預設的click時間，判斷目前dom節點的類型進行對應的操作，這個判斷過程較為繁瑣。
MyTapEvent
本人最近在做微信項目，由於fastclick插件存在一定弊端，因此開發了一個簡單的tap事件，主要思想有以下幾點：
Thinking
一次tap事件包含touchstartstart )以及touchend三種狀態
callback方法在touchend後執行
根據chrome瀏覽器默認的判斷取消點擊的移動量，手指偏移量（水平或垂直）超過15px則判定為滾動，取消執行tap事件
手指按下時間過長不視為點擊，預設時間間隔為500ms
使用HTMLElement來擴充原型，方便添加Event
使用單例模式，確保只加載一次
ok，思想定下來，代碼寫起來就清晰多了：
if (!HTMLElement.prototype.addTapEvent) {
HTMLElement.prototype.addTapEvent = function(callback) { var tapStartTime = 0,
tapEndTime = 0,
tapTime = 500, //tap等待时间，在此事件下松开可触发方法
tapStartClientX = 0,
tapStartClientY = 0,
tapEndClientX = 0,
tapEndClientY = 0,
tapScollHeight = 15, //水平或垂直方向移动超过15px测判定为取消（根据chrome浏览器默认的判断取消点击的移动量)
cancleClick = false; this.addEventListener('touchstart', function() {
tapStartTime = event.timeStamp; var touch = event.changedTouches[0];
tapStartClientX = touch.clientX;
tapStartClientY = touch.clientY;
cancleClick = false;
}) this.addEventListener('touchmove', function() { var touch = event.changedTouches[0];
tapEndClientX = touch.clientX;
tapEndClientY = touch.clientY; if ((Math.abs(tapEndClientX - tapStartClientX) > tapScollHeight) || (Math.abs(tapEndClientY - tapStartClientY) > tapScollHeight)) {
cancleClick = true;
}
}) this.addEventListener('touchend', function() {
tapEndTime = event.timeStamp; if (!cancleClick && (tapEndTime - tapStartTime) <= tapTime) {
callback();
}
})
}
}Usage
HTMLElement.addTapEvent(function(){ //do something...})
如：document.querySelect('#test').addTapEvent(function(){
alert('this is a tap event');
})Case
這裡給一個行動端案例，同時也包含了閉包的知識，前20項為tap事件，後30項為click事件，大家可以在手機上試試看效果，感受一下兩種方法的差異：
test
