mobile touch Event

vue-carousel을 한 레이어에 multiple로 사용하게 되었다.

제공되는 API는 슬라이드를 miltiple 사용에 대한 속성이 따로 정해져 있지 않았다.

pc에서는 사용에 불편이 없었지만 mobile에서 슬라이드의 세로축 스크롤 시 클릭 이벤트가 실행되는 현상이 발견되었다.

 

github에서 이슈를 확인해보니 나랑 비슷한 문제에 봉착한 사람이 있는 듯 했다.

그래서 첫번째 스크립트 작성 시 참고해봤다.

https://github.com/SSENSE/vue-carousel/issues/566

In mobile view scrolling carousel down is triggering click event. · Issue #566 · SSENSE/vue-carousel

 

내 상황과 완벽하게 똑 떨어지진 않았지만 그래도 거의 그냥 코드를 그대로 사용했기 때문에 따로 정리하진 않겠다.

사용된 이벤트에 대한 내용은 아래를 참고하길 바란다.

Touch events

https://developer.mozilla.org/ko/docs/Web/API/Touch_events

Touch events - Web API | MDN

원하는대로 동작이 잘 되긴 하나 start와 end를 나눠 접촉한 포인트를 저장하고 비교해야 하는 조금은 복잡한 코드한 듯 느껴 조금 더 간단하게 코드를 작성해보기로 했다.

 

mobileTouch: boolean = true;

// 스크롤 시 클릭 방지
  handleGesture(id: string) {
    if(this.mobileTouch) {
      this.$router.push(`링크로 이동`);
    }
  }

  mounted() {
    // touchmove 일때는 클릭되지 않게 한다.
    window.addEventListener('touchmove', () => {
      this.mobileTouch = false;
    });
    window.addEventListener('touchstart', () => {
      this.mobileTouch = true;
    });
    window.addEventListener('touchcancel', () => {
      this.mobileTouch = true;
    });
    window.addEventListener('touchend', () => {
      this.mobileTouch = true;
    });
  }

  unmounted() {
    window.removeEventListener('touchmove', () => {});
    window.removeEventListener('touchstart', () => {});
    window.removeEventListener('touchcancel', () => {});
    window.removeEventListener('touchend', () => {});
  }

 

MDN touchevent에 보면 touchstart나 touchstart 외에도 touchmove라는 값이 있었다.

정확히 내가 원했던 값으로 우선 mobileTouch를 만들어 true로 설정했다.

 

touchmove 일 때만 mobileTouch를 false인 상태로 만들고 클릭이벤트에 true일때만 링크로 이동하도록 조건문을 생성했다.

그랬더니 pc에서는 클릭 이벤트가 제대로 동작을 안하더라.. 하하하

 

그래서 pc일때는 그냥 클릭이 가능하도록 조건문을 추가해주었다.

handleGesture(id: string) {
    if(!this.isMobile || this.mobileTouch) { // pc일때는 항상 클릭 가능하도록 추가
      this.$router.push(`링크로 이동`);
    }
  }

  get isMobile() {
    return 모바일 auth를 가져옴
  }

 

 

 

로컬을 모바일에서 확인하기 위해 ngrok를 사용해봤다. 단점!!!! 속도가 너무너무너무 느려서 정말 인내심의 한계를 느꼈으며, 성격이 나빠졌다. 

ngrok

https://blog.outsider.ne.kr/1159

ngrok으로 로컬 네트워크의 터널 열기 :: Outsider's Dev Story

사용하려면 사이트로 이동해서 회원가입 후 access token은 등록해야 한다. 한번만 등록해두면 쭉 사용할 수 있다고 한다. 

근데.. 그냥 mac 유저라면 Safari를 통해 확인하길...(근데 왜그런지 이것도 좀 느렸음.. 나만... 왜 나만...)