HTML5 휴대폰 터치 처리

Keyword : HTML touch event, input

마우스 클릭, 이동 기준으로 게임 생성후 모바일에서 게임 실행히 마우스 이벤트가 동작하지 않았다.

터치 이벤트로 따로 연결시켜줘야 했었다.

ECMA6 클래스 기준

window.addEventListener("touchstart", this.touchDown.bind(this), false);
window.addEventListener("touchend", this.touchUp.bind(this), false);
window.addEventListener("touchmove", this.touchMove.bind(this), false);

window에서 터치와 관련됨 이벤트는 touchstart, touchend, touchmove가 있다. mousedown, mouseup, mousemove와 같은 개념

바인딩된 함수는 touchDown만 살펴보면

touchDown(event){
    this.touches = event.changedTouches;
this.touches[0].pageX, this.touches[0].pageY;
}

event의 changedTouches를 받은뒤

index마다 pageX, pageY를 확인하면 된다. (0번은 맨첫번째 터치, 터치를 여러 손가락으로 동시에 할경우 배열에 더 많이 담긴다.)