바닐라 자바스크립트로 더블 클릭 감지하기: dblclick 이벤트 완벽 가이드

dblclick 이벤트로 더블 클릭 감지하기

자바스크립트에서 더블 클릭을 감지하려면 dblclick 이벤트 리스너를 사용하면 됩니다. 별도의 라이브러리 없이 순수 자바스크립트만으로 간단하게 구현할 수 있습니다.

아래 예제는 window 객체에 더블 클릭 이벤트를 등록한 경우입니다. 이렇게 하면 웹페이지 내 어느 곳에서든 마우스로 빠르게 두 번 클릭하기만 하면 이벤트가 감지됩니다:

window.addEventListener("dblclick", event => {
  console.log("더블 클릭이 감지되었습니다")
  // Double-click detected
})

특정 DOM 요소에 적용하기

물론 window뿐만 아니라 버튼과 같은 특정 DOM 요소에도 dblclick 이벤트 리스너를 연결할 수 있습니다. 다음은 버튼에 적용한 예제입니다:

<button id="button">더블 클릭해 보세요!</button>

const button = document.getElementById("button")

button.addEventListener("dblclick", event => {
  console.log("더블 클릭이 감지되었습니다")
  // Double-click detected
})

브라우저 호환성

dblclick 이벤트는 Internet Explorer 11을 포함한 모든 최신 데스크톱 및 노트북 브라우저에서 안정적으로 지원됩니다. 따라서 PC 환경에서는 별도의 걱정 없이 바로 사용할 수 있습니다.

다만 아쉽게도 아직 일부 모바일 기기에서는 지원되지 않습니다. 모바일 환경에서 더블 탭을 감지해야 한다면 Mozilla의 호환성 표를 참고하고, 필요하다면 터치 이벤트(touchstart)와 타임스탬프를 조합해 두 번의 빠른 탭 사이 시간 간격을 측정하는 방식으로 직접 구현하는 것도 좋은 대안입니다.