최적화 - mouse_move

문제상황

  • intro 페이지에 mousemove 이벤트로 돋보기를 구현해놨는데, 배포 이후 모바일 사용자들이 불편을 호소함.
  • 모바일로 확인해보니 모바일은 mousemove 이벤트가 발생하지 않기떄문에 마치 작동을 안하는 페이지처럼 보임

해결방법 touch 이벤트

  • touch 이벤트
이벤트종류설명
touchstart손가락 표면이 닿을때 발생
touchmove표면에 움직이는 이벤트를 보낼때 발생
touchend표면에 이벤트가 없어질때 발생
  • mousemove 와의 차이

    • touch는 여러곳이 한번에 될 수 있기 때문에 좌표를 받는 방식이 mousemove와 다름
      • touches로 터치된 곳 정보가 list로 반환됨
  • touchEvent 객체의 속성

속성설명
clientX뷰포트의 상대적인 X좌표
clientY뷰포트의 상대적인 Y좌표
identifier터치객체의 고유식별자
pageX페이지좌표에서의 X좌표
pageY페이지좌표에서의 Y좌표
screenX화면좌표에서의 X좌표
screenY화면좌표에서의 Y좌표
target터치된 객체
  • console.log로 touch event 찍어보기

touch event 사용방법

html.addEventListener("touchmove", function(e) {    
  e.preventDefault();  // 이거 안해주면 제대로 작동 안함
  html.style.setProperty('--x', e.touches[0].clientX + 'px')
  html.style.setProperty('--y', e.touches[0].clientY + 'px')
})

디버깅방법

  • 크롬 - f12 - Toggle device toolbar로 모바일 형태로 변형 후 확인해보기

좋은 웹페이지 즐겨찾기