jQuery swipe event

모바일쇼핑몰에서 사용할 기능을 개발하는 중에 모바일 기기에서 좌우로 swipe에 대응하는 이벤트가 필요하게 됐다. jQuery Mobile 등의 라이브러리를 사용하면 되겠지만 단지 swipe 이벤트때문에 덩치가 큰 라이브러리를 사용하는 비효율적인 것 같아 다른 jQuery 플러그인을 찾아보니 아래와 같은 플러그인이 존재했다.

jQuery.event.move
jQuery special events movestart, move and moveend for tracking touch and mouse moves, throttled to browser animation frames.

jQuery.event.swipe
jQuery special events for the gestures swipeleft, swiperight, swipeup and swipedown.

두 개의 플러그인을 이용하면 jQuery Mobile을 이용하지 않고 swipe 이벤트를 사용할 수 있게 된다. 한가지 사용 상의 주의점이 swipe 이벤트를 적용하게 되면 scroll 이벤트를 사용할 수 없게 된다. swipe 이벤트와 scroll 이벤트를 동시에 사용하기 위해서는 아래 코드를 추가해줘야 한다.

jQuery('.mydiv')
.on('movestart', function(e) {
  // If the movestart is heading off in an upwards or downwards
  // direction, prevent it so that the browser scrolls normally.
  if ((e.distX > e.distY && e.distX < -e.distY) ||
      (e.distX < e.distY && e.distX > -e.distY)) {
    e.preventDefault();
  }
});

위 코도를 swipe 이벤트를 사용하는 페이지에 추가해주면 scroll 이벤트도 사용할 수 있게 된다. 코드 중에 ‘.mydiv’ 이부분은 상황에 맞게 수정해서 사용해야 한다.