[📌해결 완료] 모달 외부 클릭 시(touch event), 모달이 종료되면서 바깥 요소가 함께 클릭되는 문제

[ParkSohyunee]

카테고리

• [ ] 질문하기/도움받기
• [x] 에러/버그 등 제보하기
• [ ] 개선점 제안하기
• [ ] blocked 상태임을 알리기

[내용]

• 모달 외부 클릭 시, 모달이 종료되면서 바깥 요소가 함께 클릭되는 현상 해결
  • 모달 외부 클릭 상태를 제어하는 useOnClickOutSide 훅 수정
  • touchend 이벤트로 변경 및 이후 발생하는 click 이벤트 제어

[버그 원인]

• 터치이벤트는 마우스이벤트, 클릭이벤트와 함께 발생한다.
  • https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent#using_with_addeventlistener_and_preventdefault
• 터치이벤트 후 클릭이벤트를 제어 할 필요가 있다.

[해결 과정]

• Event.preventDefault()를 사용하여 기본 동작(click) 이벤트를 제어
  • touchstart 이벤트의 경우, 스크롤 성능 이슈로 인해 EventListenerOptions의 passive 옵션이 true로 설정되어 있음
  • https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners
  • 즉, Event.preventDefault()를 그대로 사용할 경우, 동작하지 않고 에러 발생
• 따라서, document.addEventListener('touchstart', handleClickOutside, { passive: false }); 옵션을 설정하고, e.preventDefault()를 사용하는 것보다 스크롤 성능에 영향을 주지 않기 위해 'touchend'이벤트로 변경 → 모든 모달 테스트 결과 동작 이슈 없음을 확인

[배운 점]

• 이벤트가 발생하는 순서를 인지하고 사용하기, 특히, 터치 이벤트를 사용할 때 클릭이벤트 관계를 고려해서 작성하자.
• 이벤트리스너의 passive 옵션을 통해 브라우저를 제어해 스크롤 성능을 향상시킬 수 있다.

[참고]

• passive 속성: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
• Toast UI 기술 블로그: https://ui.toast.com/posts/ko_20220106
• 터치, 마우스 이벤트 함께 다루기 블로그 글: https://soobing.github.io/browser/touch-mouse-event/

[seoyoung-min]

우와... 덕분에 잊고 있던 이벤트 순서에 대한 개념을 상기할 수 있었어요!! 감사합니다 소현님 :)