JavaScript - touchstart 이벤트 발생시 click이벤트가 동시에 발생하는 경우

1. 문제상황

한 요소에 touchstart와 click 이벤트를 addEventListener 으로 각각 넣어주었고

click하는 상황에는 click이벤트만 발생하지만

touch 이벤트를 할 경우 touch 이벤트와 click이벤트 두 개 다 발생하는 상황 발생

 

2. 문제해결

submit 이벤트에서만 사용하는 줄 알았던 preventDefault()함수 호출!

//코드로 보기

element.addEventListener('touchstart', function(event) {
  event.preventDefault();
  
  // touchstart 이벤트 발생 시 실행할 코드 작성
},
{ passive: false });

***passive: false 옵션

 스크롤 작업이 필요한 경우 true로 설정하면 성능이 더 향상됨

설정하지 않으면 브라우저가 스크롤 작업을 차단할 수 있음