자바스크립트 모바일 기기 웹 개발_javascript 기술에서 터치 이벤트 캡슐화의 예-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 16:46:16

원래의

1431명이 탐색했습니다.

터치스크린 기기에서 일부 기본 동작에는 터치 이벤트의 보조 캡슐화가 필요합니다.
zepto는 모바일 단말기에서 많이 사용되는 클래스 라이브러리이지만 터치 모듈로 시뮬레이트되는 일부 이벤트에는 일부 호환성 문제가 있습니다. 예를 들어 탭 이벤트에는 일부 Android 기기에서 이벤트 침투 버그가 있고 다른 유형도 다소 있습니다. 이벤트의 호환성 문제.

그래서 일반적으로 사용되는 제스처 이벤트를 직접 요약해봤습니다. 테스트할 실제 장치가 많지 않기 때문에 일부 호환성 문제가 있을 수 있습니다. 다음 코드는 iOS 7 및 Andorid 4에만 해당됩니다. 테스트는 몇 가지 공통적으로 통과됩니다. 브라우저.

탭 이벤트

탭 이벤트는 PC 브라우저의 클릭 효과와 동일합니다. 클릭 이벤트는 터치 스크린 장치에서 여전히 사용할 수 있지만 많은 장치에서는 "에 대한 빠른 응답을 원하는 경우 클릭에 약간의 지연이 발생합니다. click" 이벤트가 필요합니다. 이는 터치 이벤트의 도움으로 달성됩니다.

코드 복사 코드는 다음과 같습니다.

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 );

더블탭 이벤트

doubleTap 이벤트는 동일한 위치 범위 내에서 매우 짧은 시간 내에 손가락이 화면을 두 번 탭할 때 발생하는 이벤트입니다. 일부 브라우저에서는 doubleTap 이벤트가 텍스트를 선택합니다. 텍스트를 선택하지 않으려면 user-select:none CSS 속성을 요소에 추가할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

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 );

}

롱탭 이벤트

longTap 이벤트는 손가락이 화면을 오랫동안 움직이지 않고 누르고 있을 때 발생하는 이벤트입니다.

코드 복사

코드는 다음과 같습니다.

var startTx, startTy, lTapTimer;

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

var touches = e.touches[0];

startTx = touches.clientX;
startTy = touches.clientY;

lTapTimer = setTimeout(function(){
console.log( '긴 탭 이벤트 실행' );
}, 1000 );

e.preventDefault();
}, false );

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

if( lTapTimer && (Math.abs(endTx - startTx) > 5 || Math.abs(endTy - startTy) > 5) ){
clearTimeout( lTapTimer );
lTapTimer = null;
}
}, 거짓 );

element.addEventListener( 'touchend', function( e ){
if( lTapTimer ){
clearTimeout( lTapTimer );
lTapTimer = null;
}
}, false ) ;

스와이프이벤트

스와이프 事件幕上滑动后触发的事件，根据手指滑动的方向又分为 스와이프왼쪽(向左), 오른쪽으로 스와이프(向右), 위로 스와이프(向上), 스와이프 peDown (向下)。

复主代码代码如下:

var isTouchMove, startTx, startTy;

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

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

element.addEventListener( 'touchmove', function( e ){
isTouchMove = true;
e.preventDefault();
}, false );

element.addEventListener( 'touchend', function( e ){
if( !isTouchMove ){
return;
}

var touches = e.changedTouches[0],
    endTx = touches.clientX,
    endTy = touches.clientY,
    distanceX = startTx - endTx
    distanceY = startTy - endTy,
    isSwipe = false;

if( Math.abs(distanceX) >= Math.abs(distanceY) ){
    if( distanceX > 20 ){
      console.log( '왼쪽으로 스와이프 이벤트 실행' );
      isSwipe = true;
    }
    else if( distanceX < -20 ){
      console.log( '오른쪽으로 스와이프 이벤트 발생' );
      isSwipe = true;
    }
}
else{
    if( distanceY > 20 ){
      console.log( '위로 스와이프 이벤트 실행' );
      isSwipe = true;
    }
    else if( distanceY < -20 ){
      console.log( '아래로 스와이프 이벤트 실행' );
      isSwipe = true;
    }
}