[TypeScript] 제스처로 대화하기. #1 - 탭 편

잠깐! PointerEvent에 대해 아직 잘 모른다면 [typescript] 포인터 대통합(with. PointerEvent)을 먼저 읽어보세요!

탭은 일반적으로 짧은 시간 내에 눌렀다 떼는 동작을 말합니다. 따라서 구현은 아래와 같이 두 가지 방식을 생각할 수 있습니다.

1. pointerup을 최초 진입점으로 등록합니다. 즉, 최초에 pointerdown과 함께 모든 포인터에 대해 등록하는 것입니다.

const activePointerSet = new Set<number>();

element.addEventListener("pointerdown", e => {
    activePointerSet.add(e.pointerId);
});

document.addEventListener("pointerup", e => {
    if(!activePointerSet.has(e.pointerId)) { return; }
    activePointerSet.delete(e.pointerId);

    // ...
});

2. pointerup을 포인터마다 등록합니다. 즉, pointerdown서 등록하고, pointerup에서 해제합니다.

element.addEventListener("pointerdown", e => {
    const pointerId = e.pointerId;
    document.addEventListener("pointerup", e => {
        if(e.pointerId !== pointerId) { return; }

        // ...
    });
});

활성 포인터 집합의 유지 여부를 제외하면 두 방식 간 큰 차이는 없습니다. 모두 동일한 방식으로 핸들링을 이어갈 수 있습니다. 다만 첫 번째 방식의 경우, 추가 정보를 취급하기 위해 Set이 아닌 Map을 사용해야 할 수 있습니다.

내용은 다음 편에서 이어집니다. 읽어주셔서 감사합니다!

묻고 답하기

개인적인 판단에 의해 적절하다고 여겨지는 경우, 모두가 볼 수 있도록 이곳에 문답이 추가됩니다. 그렇지 않더라도 질문에 대한 답변은 별도로 이루어집니다.