[JS] 길게 클릭(롱클릭) 이벤트 만들기

특정 요소를 정한 시간만큼 누르고 있는 행동을 Long-Click 또는 Long-Press라고 합니다.

 

예제코드

 

 

코드

const onlongclick = ($target, duration, callback) => {
  $target.onmousedown = () => {
    const timer = setTimeout(callback, duration);
  
    $target.onmouseup = () => {
      clearTimeout(timer);
    };
  };  
}

• 마우스로 해당 타깃을 누르는 시점을 mousedown 이벤트로 감지해 주고 특정 시간만의 setTimeout 함수를 실행해 줍니다.
• 만약 특정시간이 지나기 전에 마우스 클릭을 멈춘 시점을 mouseup 이벤트로 감지해 줍니다.
• 시간이 모두 지날 때까지 mouseup 이벤트 감지가 안되면, callback 함수가 호출되고 아닐 시에는 해당 타이머를 종료시킵니다.

 

// 함수 사용예시
const $target = document.querySelector('.long-click');

onlongclick($target, 300, () => {
  alert('Long Click');
});

위 코드처럼 특정요소와 duration(끝내는 시간), callback 함수를 인자 값으로 넘겨서 사용할 수 있습니다.

 

모바일 호환 문제

const onlongclick = ($target, duration, callback) => {
  $target.onmousedown = () => {
    const timer = setTimeout(callback, duration);
  
    $target.onmouseup = () => {
      clearTimeout(timer);
    };
  };  
  
  $target.ontouchstart = () => {
    const timer = setTimeout(callback, duration);
  
    $target.ontouchend = () => {
      clearTimeout(timer);
    };
  };  
}

 

mousedown, mouseup은 PC환경에서 사용되는 이벤트이며, 모바일에서는 touchstart, touchend 이벤트를 사용해줘야 합니다.

 

모바일 환경에서는 마우스 포인터 대신에 터치라는 개념을 이용해서 클릭을 합니다.