자바스크립트 지도 구현시 더블 클릭 이벤트 실행 전 클릭 이벤트 실행 방지

지도/로컬 API
1

안녕하세요
클릭 이벤트 리스너로 특정 동작을 등록해놓았는데, 더블 클릭을 하면 줌되는 동작이 실행되기 전 클릭 이벤트에 등록된 동작이 먼저 실행됩니다.
하나를 막지 않고 두 경우를 구분해 모두 구현할 수 있을까요?
미리 답변 감사드립니다.

2

setTimeout, clearTimeout을 사용해서 클릭 이벤트가 발행할 때 일정 시간 안에 더블 클릭 이벤트가 발행할 경우
클릭 이벤트가 실행되지 않도록 처리하는 방법이 있습니다.
아래 코드 참고해주세요.

let timer = null;
const DELAY = 300; // 더블클릭 감지 시간

function handleClick(event) {
  if (timer === null) {
    timer = setTimeout(() => {
        timer = null;
        singleClickHandler(event);
    }, DELAY);
  } else {
    clearTimeout(timer);
    timer = null;
    doubleClickHandler(event);
  }
}

function singleClickHandler(event) {
  let latlng = event.latLng;
  console.log(`click! ${latlng.toString()}`);
}

function doubleClickHandler(event) {
  let latlng = event.latLng;
  console.log(`double click! ${latlng.toString()}`);
}


kakao.maps.event.addListener(map, 'click',handleClick);
1개의 좋아요
3

답변 감사드립니다만, 제가 자바 스크립트를 거의 처음 접해봐서 그런데 이걸 html 상의 script로 구현해도 동일하게 하면 될까요?

4

네, 첨부 코드는 스크립트 코드라 그대로 추가하면 확인하실 수 있습니다.

5

넵 계속 확인해주셔서 감사합니다!