1. 터치 이벤트 등록

첫째로, 터치 이벤트를 등록해야 합니다. 아래와 같이 “touchstart”, “touchend” 이벤트를 사용하여 터치가 시작되고 끝났을 때를 감지할 수 있습니다.

const targetElement = document.getElementById('target');

let pressTimer;

targetElement.addEventListener('touchstart', function(e) {
    pressTimer = setTimeout(function() {
        // 롱 프레스 동작을 감지하는 코드를 여기에 추가
    }, 1000); // 1초 후에 롱 프레스로 처리
});

targetElement.addEventListener('touchend', function(e) {
    clearTimeout(pressTimer);
});

위의 코드는 target라는 아이디를 가진 요소에서의 터치 시작과 끝을 감지하고, 1초 이상 길게 누른 경우에 “롱 프레스 동작을 감지”하는 코드를 실행합니다.

2. 롱 프레스 동작 감지

“롱 프레스 동작을 감지”하는 코드를 원하는 동작으로 대체해야 합니다. 이를 위해 setTimeout 내부에 실행할 함수를 작성하고, 해당 시간 내에 clearTimeout로 취소하지 않으면 롱 프레스로 처리하는 방식 등을 구현할 수 있습니다.

이와 같이 JavaScript의 터치 이벤트를 활용하여 롱 프레스 동작을 감지할 수 있습니다.

이 코드는 웹페이지에서 작동하지만, 몇 가지 수정을 거치면 React 또는 Vue.js와 같은 프레임워크에서도 사용할 수 있습니다.