HTML5 터치 이벤트

일. 왜 터치 이벤트를 사용하는가？##

터치 이벤트는 모바일 브라우저에 특화된 HTML5 이벤트이지만, 이것이 터치 이벤트를 사용하는 주된 이유는 아닙니다. 모바일에서 click 은 상당한 지연 (약 300ms) 이 있기 때문입니다. 300ms 지연은 더블클릭과 롱탭을 판단하기 위해 발생합니다. 후속 동작이 없음을 확인한 후에야 click 이벤트가 발생하므로 기본 대기 시간이 필요합니다. 반면 터치 이벤트의 지연은 매우 짧으며, 터치 이벤트를 사용하면 페이지 응답 속도를 높이고 더 나은 사용자 경험을 제공할 수 있습니다.

이. 표준 터치 이벤트##

Webkit 의 터치 이벤트

이벤트 이름	설명	touches 배��� 포함
touchstart	터치 시작 (사용자가 화면에 손가락을 올림)	예
touchmove	접촉점 변경 (사용자가 화면에서 손가락을 이동시키며 손가락이 화면에서 떨어지지 않음)	예
touchend	터치 종료 (사용자의 손가락이 화면에서 떨어짐)	예
touchcancel	터치 취소 (알림 등 어떤 사유로 터치가 중단됨)	아니오

P.S. touches 배열은 터치 객체 배열이며, 터치 객체에는 우리가 원하는 데이터가 포함되어 있습니다

터치 객체의 속성

속성	설명
identifier	이 터치의 고유 식별자. 사용자의 손가락이 화면에 있는 동안 이 값은 변하지 않습니다
screenX	화면 왼쪽 가장자리로부터의 접촉점 거리
screenY	화면 상단으로부터의 접촉점 거리
clientX	브라우저 창 왼쪽 가장자리로부터의 접촉점 거리
clientY	브라우저 창 상단으로부터의 접촉점 거리
pageX	페이지 왼쪽 가장자리로부터의 접촉점 거리
pageY	페이지 상단으로부터의 접촉점 거리
target	이벤트 소스를 가져옴. event.target 과 유사

P.S. 실제로 radiusX/radiusY, rotationAngle, force 라는 세 가지 속성이 더 있지만 브라우저 호환성이 낮고 구현에 차이가 있어 여기서는 소개하지 않습니다

삼.IE10 의 터치 이벤트##

IE 포인터 이벤트

이벤트 이름	설명 (터치 장치에서)
MSPointerDown	터치 시작
MSPointerMove	접촉점 이동
MSPointerUp	터치 종료
MSPointerOver	터치 포인트가 요소 안으로 이동. mouseover 와 동일
MSPointerOut	터치 포인트가 요소에서 벗어남. mouseout 과 동일

P.S. IE 는 포인터 이벤트라고 부르며, 이 이벤트에는 세 가지 트리거 형식 (마우스 클릭, 스타일러스 펜 경촉, 손가락 터치) 이 있기 때문입니다

MSPointerEvent 속성

속성	설명
hwTimestamp	이벤트 생성 시간 (ms)
isPrimary	이 포인터가 주 포인터인지 여부를标识
pointerId	포인터의 고유 ID (터치 이벤트의 식별자와 유사)
pointerType	정수 값. 이 이벤트가 마우스, 스타일러스 펜, 손가락 중 어디서 발생했는지 표시
pressure	펜의 압력. 0-255. 스타일러스 펜 입력 시에만 사용 가능
rotation	0-359 의 정수. 커서의 회전 각도 (지원되는 경우)
tiltX/tiltY	스타일러스 펜의 기울기 각도. 스타일러스 펜 입력 시에만 지원

pointerType 감지:

function handleEvent(event){
  switch(event.pointerType){
    case event.MSPOINTER_TYPE_TOUCH:
  //손가락
  break;
case event.MSPOINTER_TYPE_PEN:
  //스타일러스 펜
  break;
case event.MSPOINTER_TYPE_MOUSE:
  //마우스
  break;
 default:
   break;
  }
}
document.body.addEventListener("MSPointerDown", handleEvent, false);

실제로는 더 간단한 손가락 감지 방법이 있습니다. touches 배열의 존재 여부를 직접 판단하면 됩니다. 예를 들어:

document.addEventListener('MSPointerDown', function(e){
  switch(e.type){
    case 'touchstart':var startPos = e.touches ? e.touches[0].pageX : e.screenX;
    //...
  }
}, false);

사. tap 이벤트 소스 코드 캡슐화 (tap 은 모바일 버전의 click)

(function(){

    var TOUCHSTART, TOUCHEND;

    //normal touch events
    if (typeof(window.ontouchstart) != 'undefined') {
    
        TOUCHSTART = 'touchstart';
        TOUCHEND   = 'touchend';
    
    //microsoft touch events
    } 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, scope) {
    
        var scopeObj;
    
        if(!scope) {
            scopeObj = this._node;
        } else{
            scopeObj = scope;
        }

    
        if (evt === 'tap') {
            this._node.addEventListener(TOUCHSTART, function() {
                callback.apply(scope, arguments);
            });
        } else if (evt === 'tapend') {
            this._node.addEventListener(TOUCHEND, function() {
                callback.apply(scope, arguments);
            });
        } else {
            this._node.addEventListener(evt, function() {
                callback.apply(scope, arguments);
            });
        }
    
        return this;
    
    }

    window.$ = function(selector) {

        var node = document.querySelector(selector);

        if(node) {
            return new NodeFacade(node);
        } else {
            return null;
        }
    }


})();

P.S. 위 소스 코드는 touch-interfaces.com 에서 가져옴

참고 자료###

• 『HTML5 터치 인터페이스 설계 및 개발』