JavaScript中的tap指的是觸摸事件。隨著移動(dòng)設(shè)備的普及，越來越多的網(wǎng)站和應(yīng)用程序都將iphone的tap事件當(dāng)做點(diǎn)擊事件的一部分來使用。隨著HTML5的推出和交互式Web應(yīng)用程序的需求的增加，tap事件成為開發(fā)人員用以支持手勢的一個(gè)很重要的事件。

touchstart、touchmove和touchend是三個(gè)用于構(gòu)建復(fù)雜的手勢（例如拖動(dòng)）的基本事件（或觸控點(diǎn)）。在大多數(shù)情況下，我們只需要一個(gè)簡單的tap事件。

element.addEventListener('touchstart',function(e){
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
startTime = e.timeStamp;
}, false);
element.addEventListener('touchend',function(e){
var spanX = e.changedTouches[0].pageX - startX;
var spanY = e.changedTouches[0].pageY - startY;
var endTime = e.timeStamp;
if(Math.abs(spanX) < 5 && Math.abs(spanY) < 5 && endTime - startTime < 500){
e.preventDefault();
doMyFunction(e.target); //點(diǎn)擊事件所調(diào)用的函數(shù)
}
}, false);

上述代碼是一個(gè)常見的tap事件的實(shí)現(xiàn)方式，當(dāng)觸摸事件結(jié)束時(shí)檢查觸摸點(diǎn)是否移動(dòng)過，如果沒有并且觸摸時(shí)間小于500ms，認(rèn)為用戶已經(jīng)進(jìn)行了單擊（tap）。

另一種方法是添加封裝后的tap事件到原型鏈，方便重用：

function addTapEvent(listener, scope) {
var startX,
startY;
return function(e) {
var touch = e.changedTouches[0];
switch (e.type) {
case 'touchstart':
startX = touch.clientX;
startY = touch.clientY;
break;
case 'touchend':
if (Math.abs(touch.clientX - startX) < 10 && Math.abs(touch.clientY - startY) < 10) {
listener.call(scope, e);
}
break;
}
}
}
element.addEventListener('touchstart', addTapEvent(function(){
alert('tapped!');
}));

這種方式為想要使任何DOM元素具有tap事件的開發(fā)人員提供了一種干凈、可擴(kuò)展和可重用的方法。

在移動(dòng)端開發(fā)中，tap事件是不可或缺的一環(huán)。利用它，我們可以實(shí)現(xiàn)更流暢、更自然的操作。它是我們提供出色用戶體驗(yàn)的一個(gè)重要的組成部分。