모바일은 터치 이벤트리스너를 달아야한다
사이트를 모바일 기기로 테스트 하고 싶으면 크롬 개발자도구 좌상단 toggle device toolbar 버튼 누르기
모바일 기기로 테스트를 하면 스와이프가 안된다
왜냐하면 마우스이벤트리스너를 달았기 때문에 모바일에서는 터치이벤트리스너를 달아줘야 터치에 반응을 한다
- touchstart (터치시작시 발동)
- touchmove (터치중일 때 계속 발동)
- touchend (터치종료시 발동)
<script>
$('.slide-box').eq(0).on('touchstart', function(){
시작좌표 = e.touches[0].clientX;
생략
})
$('.slide-box').eq(0).on('touchmove', function(){
생략
})
$('.slide-box').eq(0).on('touchend', function(){
생략
})
</script>기존코드에서 약간 변형만 하면 완성!
(주의)
e.clientX 를 e.touches[0].clientX 이걸로 바꿔야한다
왜냐하면 터치는 여러 손가락으로 할 수 있기 때문에 몇개의 손가락인지 지정을 해줘야 하기 때문이다
또한 touchend이벤트리스너에선 e.clientX말고 e.changedTouches[0].clientX를 써야한다
코드가 너무 길어요
그래서 자바스크립트는 외부 라이브러리 의존도가 높아서 이런 경우에는 Hammer.js 같은걸 가져다 쓰면 조금 쉽게 개발이 가능하다
-브라우저 호환성도 알아서 잡아주고
-이벤트리스너 6개 대신 1개만 써도 되고
-스와이프, pinch, rotate 등 여러 제스쳐를 감지하는 이벤트리스너를 제공해서 편리하다
이번 강의 핵심⭐⭐⭐
유저의 터치를 여러 방식으로 감지 할 수 있고
터치좌표, 터치이동거리도 출력할 수 있구나~ 를 알아가야한다
캐러셀 스와이프를 만드려면 변수2개, 이벤트리스너3개 어쩌구 이런걸 외우는 것이 아니다❌❌
항상 개발 할 땐
-구현하고 싶은 기능과 동작방식을 한글로 상세히 설명하고
-작고 쉬운것부터 개발해나가면 됩니당
💻