자바스크립트 모바일 기기 웹 개발_javascript 기술에서 터치 이벤트 캡슐화의 예

var startTx, startTy;

element.addEventListener( 'touchstart', function( e ){
var touches = e.touches[0];

startTx = touches.clientX;
startTy = touches.clientY;
}, false );

element.addEventListener( 'touchend', function( e ){
var touches = e.changedTouches[0],
endTx = touches.clientX,
endTy = touches.clientY;

// 일부 기기에서는 터치 이벤트가 더 민감하여 손가락을 눌렀다가 떼면 이벤트 좌표가 약간 변경됩니다.
if( Math.abs(startTx - endTx) < 6 && Math.abs ( startTy - endTy) < 6 ){
console.log( 'fire tap event' );
}
}, false );

var isTouchEnd = false,
lastTime = 0,
lastTx = null,
lastTy = null,
firstTouchEnd = true,
body = document.body,
dTapTimer, startTx, startTy, startTime;

element.addEventListener( 'touchstart', function( e ){
if( dTapTimer ){
clearTimeout( dTapTimer );
dTapTimer = null;
}

var touches = e.touches[0];

startTx = touches.clientX;
startTy = touches.clientY
}, false );

element.addEventListener( 'touchend', function( e ){
var touches = e.changedTouches[0],
endTx = touches.clientX,
endTy = touches.clientY,
now = Date.now(),
기간 = 지금 - lastTime;

// 먼저 단일 탭 이벤트가 트리거될 수 있는지 확인하세요.
if( Math.abs(startTx - endTx) < 6 && Math.abs(startTx - endTx) < 6 ){
/ / 두 탭 사이의 간격은 500밀리초 이내여야 합니다
if( Duration < 301 ){
// 이 탭 위치와 이전 탭 위치 사이에는 일정 범위의 오류가 허용됩니다
if( lastTx ! == null &&
Math.abs(lastTx - endTx) < 45 &&
Math.abs(lastTy - endTy) < 45 )

firstTouchEnd = true;

lastTx = lastTy = null;
console.log( '두 번 탭 이벤트 실행' );
}
}
else{
lastTx = endTx ;
lastTy = endTy;
}
}
else{
firstTouchEnd = true;
lastTx = lastTy = null;
}

lastTime = 현재;

}, false );

// iOS Safari에서 손가락으로 화면을 너무 빠르게 탭하면

// 두 번째 터치스타트 및 터치엔드 이벤트가 응답하지 않을 가능성이 있습니다
// 동시에, 오랫동안 손가락을 탭해도 클릭이 발생하지 않습니다

if( ~navigator.userAgent.toLowerCase().indexOf('iphone os') ){

body.addEventListener( 'touchstart', function( e ){

startTime = Date.now();
}, true );

body.addEventListener( 'touchend', function( e ){

var noLongTap = Date.now() - startTime < 501;

if( firstTouchEnd ){

firstTouchEnd = false;
if( noLongTap && e.target === element ){
dTapTimer = setTimeout(function(){
         firstTouchEnd = true;
           lastTx = lastTy = null; }
else{
firstTouchEnd = true ;
}
}, true );

// iOS에서는 손가락이 화면을 너무 빠르게 여러 번 탭하면 클릭 이벤트가 트리거되지 않습니다.
element.addEventListener( 'click', function( e ){
if( dTapTimer ){
clearTimeout( dTapTimer );

dTapTimer = null;

firstTouchEnd = true;
}
}, false );

}

롱탭 이벤트