[JS] 버튼 롱클릭, 숏클릭 구현하기, 빠르게 알아보자

안녕하세요! 오늘도 열심히 개발중입니다. 제가 백엔드 분야이기는 하지만 아무래도 혼자 프로젝트를 진행하려면 프론트엔드 영역도 많이 알아야 된다는 것을 느꼈습니다. 이번 포스팅에서는 많은 서비스에서 애용중인 롱클릭 숏클릭 이벤트에 대해서 알아보겠습니다. 롱클릭과 숏클릭이 유행하게 된 원인은 모바일 기기에서 터치로 버튼을 클릭하기 때문인데요. 이 때문에 롱클릭은 손가락으로 꾹 누르면 실행되는 구조입니다.

 

 

 

JS 롱클릭과 숏클릭 구현

const app_click = async () => {
    console.log("taskApp click 이벤트");

    let pcLong = 0;
    const LONG_CLICK = 700;
    const mouse_start = (event) => {
        console.log("mouse start isDrag : ", is_drag);
        pcLong = Date.now(); //클릭한 시간 얻어옵니다

        clear_message = setTimeout(() => {
            is_long_click = true;
            
            // long click event
            
        }, LONG_CLICK)
    };

    const mouse_end = async (event) => {
        console.log("mouse end isDrag : ", is_drag);

        let result = Date.now() - pcLong;

        if (Number(result) > LONG_CLICK) { //롱 클릭 발생
        } else if (Number(result) < LONG_CLICK) {
            console.log("short click");

            clearTimeout(clear_message);

			// show click event
        }
    };
    
    const task_apps = document.querySelctorAll(".taskbarApp");

    Array.from(task_apps).forEach(function (element) {
        element.addEventListener("mousedown", mouse_start); //pc mouse start
        element.addEventListener("mouseup", mouse_end); //pc mouse end
    });

}

 

저같은 경우 현재 진행중인 프로젝트가 충돌 문제로 다른 api(jquery나 front end api)를 사용하지 못하는 상황이라 순수 js 코드로만 작성을 하였습니다. 먼저 mouse up 이벤트시에 시작 시간을 기록한 뒤에 setTimeout을 걸어줍니다.

 

 

(1) setTimeout이 시작될 때 해당 함수에 대한 고유 일련번호 같은 것이 나오는데 이 값을 받은 후에 mouse_end 시점에 처리합니다.

 

(2) mouse를 떼서 mouse up 이벤트기 실행되면 mousedown 이벤트 시점의 시간과 mouse up 이벤트 시점의 차이를 구합니다.

 

(3) 구한 시간 차이가 설정한 롱클릭의 경우에는 settimeout 실행함수를 그대로 실행하고 short 클릭의 경우 clearTimeout을 통해 롱클릭 실행 함수를 제거합니다.

 

 

이상 setTimeout 특성을 이용한 롱클릭 숏클릭 구현법이였습니다. 감사합니다.