[Javascript] mobile touch Event

 

touch event? click event? mouse event?

처음으로 모바일쪽 웹 페이지를 고려하여 개발을 들어가시는 분들은 PC 페이지에서는 이벤트 들이 제대로 실행 되었는데, 모바일에서는 실행되지 않았던 경험을 겪어 보셨을 거에요.

모바일은 이벤트의 종류가 PC 버전과는 상이하기 때문인데, 대표적으로는 touch, click, mouse 세가지가 혼동 되실 것 같아요.

 

개인적으로 세 이벤트를 이해하기 쉽게 설명해 보면,

• mouse : 컴퓨터와 연결된 mouse와 관련된 이벤트 들이에요. 마우스의 up, down, move, whell 이벤트 들이 이쪽에 포함 되요.
• click : touch up & down, mouse up & down 을 묶은 이벤트 에요.
• touch : display를 touch 했을 때 일어나는 up, down, move 등의 이벤트 들이에요.

즉, mouse 이벤트는 touch 이벤트에 연결이 되지 않는 다는 점!

그렇다면 어떻게 구현 해야 할까요?

 

 

touchstart, touchmove, touchend로 이벤트를 연결!

터치 이벤트는 주로 세가지 이벤트를 이용하게 되요.

touchstart, touchmove, touchend 이렇게 세 종류인데,

• touchstart : up
• touchmove: move
• touchend : down

정도로 이해해 주시면 될 것 같아요.

jquery 에서의 사용 방법만 예시로 들어 볼게요!

$(object).on("touchstart", function (e) {
	// ...
})

$(object).on("touchmove", function (e) {
	// ...
})

$(object).on("touchend", function (e) {
	// ...
})

위와 같이 연동을 해주시면 되요.

보통 슬라이드 기능(캐러샐 기능) 등을 구현 할 때 자주 사용 하게 되는데, 이 땐 start와 end 이벤트 만으로도 구현이 가능하고,

손가락을 따라가는 슬라이드 기능을 구현 하려면 move event도 이용 해야 겠지요?

 

한가지 주의해야 할 점은, touchstart와 touchend의 좌표값 접근 방법이 조금 다르다는 점 입니다.

 

$(object).on("touchstart", function (e) {
	e.originalEvent.touches[0].pageX
    e.originalEvent.touches[0].pageY
    // e.originalEvent.changedTouches[0] 는 사용 불가!
})

$(object).on("touchmove", function (e) {
	e.originalEvent.touches[0].pageX
    e.originalEvent.touches[0].pageY
    e.originalEvent.changedTouches[0].pageX
    e.originalEvent.changedTouches[0].pageY
    // 둘 다 사용 가능!
})

$(object).on("touchend", function (e) {
    e.originalEvent.changedTouches[0].pageX
    e.originalEvent.changedTouches[0].pageY
	// e.originalEvent.touches[0] 는 사용 불가!
})

각 이벤트별 터치 좌표값의 접근 방법은 위 코드를 참조해 주세요..

touchstart에서 시작 좌표값을 저장하고,

touchend에서 끝 좌표값과 시작 좌표값을 비교해 준다면 터치하면서 움직인 거리 값을 측정하여 다른 이벤트 들을 연동 할 수 있겠죠?

 

그럼 웹에서 구현한 mouse event들도 쉽게 연동이 가능하시 거에요!