[웹앱 맨땅에 헤딩일기] - (Mobile) 뒤로가기, 앞으로 가기 모션 추가

언제든 코드에 대한 반박은 환영합니다... 알려주세요 더 좋은 방법을!!!

 

저는 아이폰을 사용하고 있는데, 핸드모션으로 뒤로가기 하는 걸 주로 사용하는데,

제가 하고 있는 프로젝트에도 적용해보고 싶었어요!!

 

이 코드는 모든 header.jsp 에 넣어서 모든 화면에서 적용할 수 있도록 했어요!

 

<script>
  document.addEventListener('touchstart', handleTouchStart, false);
  document.addEventListener('touchmove', handleTouchMove, false);

  var xStart = null;
  var previousPath = null;

  function handleTouchStart(event) {
    xStart = event.touches[0].clientX;
  }

  function handleTouchMove(event) {
    if (!xStart) return;

    var xEnd = event.touches[0].clientX;
    var xDiff = xStart - xEnd;

    if (xDiff > 50) {
      // 오른쪽 모션: 이전 페이지로 이동하는 로직을 작성합니다.
      if (previousPath) {
        window.location.href = previousPath;
      }
    } else if (xDiff < -50) {
      // 왼쪽 모션: 다음 페이지로 이동하는 로직을 작성합니다.
      var currentURL = window.location.href;
      var currentPath = new URL(currentURL).pathname;
      previousPath = currentPath;
      // 이전 페이지로 이동하는 로직을 작성합니다.
      // 이전 페이지의 상대 경로를 계산하여 처리합니다.
      moveToPreviousPage();
    }

    xStart = null;
  }

  function moveToPreviousPage() {
    // 이전 페이지로 이동하기 위해 history.back()을 호출합니다.
    window.history.back();
  }
</script>

 

 

 

잘 적용은 되는데, 너무 잘 작동해서.. 문제네요.... 

좀 적절하게 작동할 수 있게 할 수 있는 방법이 있을까요?