MDN pointer events: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events

Pointer Events 👆

웹 애플리케이션에서 멀티 터치를 구현하려면 터치 이벤트 혹은 포인터 이벤트를 활용해야 합니다.

웹에서 터치 입력을 처리할 때 포인터 이벤트(Pointer Events) 와 터치 이벤트(Touch Events) 중 하나를 선택할 수 있는데, 두 방식 모두 멀티 터치와 제스처 감지를 지원하지만 차이점이 있습니다.

Touch events는 터치 스크린에서 발생하는 이벤트이므로 모바일에서만 사용하는 앱의 경우에 적절합니다. Pointer Events는 터치, 마우스, 스타일러스(펜) 입력을 한 DOM 이벤트에서 전부 다룰 수 있습니다.

PointerEvent 객체는 MouseEvent의 모든 속성을 상속받고, pressure, contact geometry, tilt와 같은 추가 속성을 가지고 있습니다.

📌 관련 개념

digitizer

터치를 감지할 수 있는 기기

pointer

특정 기기에 종속되지 않고, 스크린의 특정 좌표(혹은 좌표들)을 선택할 수 있는 입력

pointer capture

특정 요소에 pointer 이벤트를 재타겟팅할 수 있습니다. 예를 들어 pointer down 시 DOM에 요소를 append하고 계속해서 Pointer Event를 받게하고 싶다면, setPointerCapture와 pointer id를 사용할 수 있습니다. 이는 releasePointerCapture를 사용해 해제할 수 있습니다.

📌 PointerEvent 인터페이스

altitudeAngle

애플 펜슬과 같은 스타일러스가 화면에 닿을 때, 스타일러스의 축이 화면의 X-Y 평면과 이루는 각도 (포인터가 화면에 얼마나 기울어졌는지)

azimuthAngle

포인터의 축이 Y-Z 평면과 포인터 축 및 Y 축을 포함하는 평면 사이의 각도 (포인터가 얼마나 회전했는지)

PointerEvent.persistentDeviceId

포인터 이벤트를 생성한 포인팅 장치의 고유 ID

pointerId

발생 포인터 이벤트의 고유 식별자

width, height

포인터가 접촉한 X, Y에 대한 px 단위 크기

pressure

포인터가 화면에 직접적으로 누르는 힘을 나타냅니다. (0에서 1 사이, 0은 최소 압력, 1은 최대 압력)

tangentialPressure

포인터가 화면에 수평으로 가하는 압력, 즉 측면 압력을 측정합니다. 이는 포인터의 축을 중심으로 옆으로 눌리는 힘을 의미합니다. (-1에서 1, 0은 중립)

tiltX, tiltY

• tiltX: Y-Z 평면과 포인터 축 및 Y 축을 포함하는 평면 사이의 각도
• tiltY: X-Z 평면과 포인터 축 및 X 축을 포함하는 평면 사이의 각도

twist

포인터의 주요 축을 중심으로 시계 방향으로 회전한 정도(0에서 359도).

pointerType

이벤트를 발생시킨 장치의 유형
"mouse", "touch", "pen"(stylus), ""(브라우저에서 지원하지 않음)

isPrimary

멀티 포인트 시나리오에서, 현재 포인터가 해당 포인터 유형의 기본 포인터인지 여부

예를 들어, 마우스와 터치스크린을 함께 사용할 때 애플리케이션이 주요 포인터만 지원하고, 주요 포인터가 아닌 모든 포인터 이벤트를 무시하도록 작성할 수 있습니다

• 마우스는 하나의 포인터만 있기 때문에 항상 주요 포인터로 간주됩니다.
• 터치 입력의 경우, 사용자가 화면을 터치했을 때, 다른 터치가 활성화되지 않았다면, 포인터는 주요 포인터입니다.
• 펜/스타일러스 입력의 경우, 사용자가 화면에 펜을 처음 접촉했을 때 다른 펜이 화면에 접촉되어 있지 않았다면, 포인터는 주요 포인터입니다.

📌 Event와 전역 이벤트핸들러

Pointer Event는 총 10개의 이벤트와 1개의 실험적 이벤트를 가지고 있습니다. 이 중 7개는 마우스 이벤트에 대응합니다. (down, up, move, over, out, enter, leave)

이벤트	설명	상황
pointerdown	포인터가 버튼 활성 상태로 변할 때 발생	클릭/터치 시작
pointerup	포인터가 더 이상 활성 상태가 아닐 때 발생	클릭/터치 끝
pointermove	포인터의 좌표 변경 시 발생	마우스/터치 이동
pointerover	포인터가 요소의 hit test 경계에 들어올 때 발생	마우스/손가락이 요소로 들어올 때
pointerout	포인터가 요소의 hit test 경계에서 나갈 때 발생	마우스/손가락이 요소를 벗어날 때
pointerenter	포인터가 요소 또는 자식 요소의 hit test 경계에 들어올 때 발생	마우스/손가락이 요소에 닿을 때
pointerleave	포인터가 요소의 hit test 경계에서 나갈 때 발생	마우스/손가락이 요소에서 벗어날 때
pointercancel	브라우저가 포인터가 더 이상 이벤트를 발생시킬 수 없다고 판단할 때 발생	장치 비활성화
gotpointercapture	요소가 pointer capture를 받았을 때 발생	pointer capture 시작
lostpointercapture	pointer capture가 해제될 때 발생	pointer capture 해제
pointerrawupdate	포인터가 pointerdown/up 외 속성에서 변경 시 발생 (실험적)	펜의 압력/기울기 변화 시

📌 Element를 확장한 3가지 속성

메서드	설명
setPointerCapture()	특정 요소를 미래의 포인터 이벤트에 대한 pointer capture 대상으로 지정합니다.
releasePointerCapture()	특정 포인터 이벤트에 대해 이전에 설정된 pointer capture를 해제합니다.
hasPointerCapture()	주어진 pointer id에 대해 pointer capture가 설정된 요소인지 확인합니다.

📌 Navigator

Navigator.maxTouchPoints는 장치가 동시에 지원할 수 있는 최대 터치 포인트 수를 확인하는 데 사용되는 속성입니다. 이 속성은 터치스크린 장치에서 여러 손가락을 동시에 인식할 수 있는 최대 수를 반환합니다.

if (navigator.maxTouchPoints > 1) {
  console.log('이 장치는 멀티 터치를 지원합니다');
} else {
  console.log('이 장치는 멀티 터치를 지원하지 않습니다 == 터치 기반 입력을 지원하지 않음');
}

📌 자바스크립트 사용예

이벤트핸들러 구독

DOM에 그려진 target 요소에 이벤트 핸들러를 구독합니다.

<div id="target">Touch me…</div>

function over_handler(event) {}
function enter_handler(event) {}
function down_handler(event) {}
function move_handler(event) {}
function up_handler(event) {}
function cancel_handler(event) {}
function out_handler(event) {}
function leave_handler(event) {}
function rawUpdate_handler(event) {}
function gotCapture_handler(event) {}
function lostCapture_handler(event) {}

function init() {
  const el = document.getElementById("target");
  // Register pointer event handlers
  el.onpointerover = over_handler;
  el.onpointerenter = enter_handler;
  el.onpointerdown = down_handler;
  el.onpointermove = move_handler;
  el.onpointerup = up_handler;
  el.onpointercancel = cancel_handler;
  el.onpointerout = out_handler;
  el.onpointerleave = leave_handler;
  el.onpointerrawupdate = rawUpdate_handler;
  el.ongotpointercapture = gotCapture_handler;
  el.onlostpointercapture = lostCapture_handler;
}

document.addEventListener("DOMContentLoaded", init);

이벤트 핸들러 예시

function down_handler(ev) {
  // 포인트 이벤트의 면적 계산
  const area = ev.width * ev.height;

  // 현재 이벤트의 id가 캐시되어 있는 지 확인
  if (id === ev.identifier) process_id(ev);

  // pointerType에 따른 핸들러 호출
  switch (ev.pointerType) {
    case "mouse":
      process_mouse(ev);
      break;
    case "pen":
      process_pen(ev);
      break;
    case "touch":
      process_touch(ev);
      break;
    default:
      console.log(`pointerType ${ev.pointerType} is not supported`);
  }

  // tilt 핸들러 호출
  if (ev.tiltX !== 0 && ev.tiltY !== 0) process_tilt(ev.tiltX, ev.tiltY);

  // pressure 핸들러 호출
  process_pressure(ev.pressure);

  // 멀티 포인터의 경우, primary 핸들러가 아닌 경우의 핸들러 호출
  if (!ev.isPrimary) process_non_primary(ev);
}

function init() {
  const el = document.getElementById("target");
  // DOM 요소에 이벤트 구독
  el.onpointerdown = down_handler;
}

document.addEventListener("DOMContentLoaded", init);

📌 Button State

마우스와 펜 등의 기기는 여러개의 버튼을 가지고 있습니다. button과 buttons 속성을 통해서 어떤 버튼이 눌렸는 지 확인할 수 있습니다.

상태	button	buttons
버튼이나 터치/펜 접촉이 마지막 이벤트 이후 변경되지 않음	-1	—
버튼이 눌리지 않은 상태에서 마우스가 움직이거나, 버튼이 눌리지 않은 상태에서 펜이 호버 중일 때	—	0
왼쪽 마우스, 터치 접촉, 펜 접촉	0	1
가운데 마우스	1	4
오른쪽 마우스, 펜 배럴 버튼	2	2
X1 (뒤로) 마우스	3	8
X2 (앞으로) 마우스	4	16
펜 지우개 버튼	5	32

📌 Pointer Capture

포인터 캡처는 특정 포인터 이벤트가 포인터의 위치에서 기존 hit test 대신에 특정 요소로 재타겟팅되도록 합니다. 만약 포인터 장치의 접촉이 요소를 벗어나더라도(스크롤이나 팬으로 이동) 해당 요소가 계속해서 포인터 이벤트를 받을 수 있도록 합니다.

포인터 캡처는 타겟 요소가 이후의 포인터 이벤트를 마치 그 요소에서 일어난 것처럼 캡처할 수 있게 하기 때문에, 캡처가 설정되면 pointerover, pointerenter, pointerleave, pointerout 이벤트가 발생하지 않습니다.

터치스크린 브라우저에서는 pointerdown 이벤트가 트리거될 때 해당 요소에 암시적으로 포인터 캡처가 설정됩니다. 캡처는 pointerup 또는 pointercancel 이벤트 후 자동으로 해제되고, element.releasePointerCapture를 호출하여 수동으로 해제할 수 있습니다.

📌 touch-action CSS 속성

button {
  touch-action: none; // 터치 동작을 적용하지 않음
}

#target {
  touch-action: pan-x; // pan-x를 제외한 터치 동작 제한
}

touch-action CSS 속성은 브라우저가 특정 영역에 대해 네이티브 터치 동작(예: 확대/축소 또는 스크롤)을 적용할지 여부를 지정하는 데 사용됩니다.

• auto(기본값): 브라우저의 기본 터치 동작 허용
• none: 브라우저의 기본 터치 동작 비활성화
• pan-x: 수평 스크롤만 가능
• pan-y: 수직 스크롤만 가능
• manipulation: 스크롤 및 확대/축소 동작만 가능

📌 사례

마우스 이벤트와의 호환성 문제 예시

포인터 이벤트 인터페이스는 포인터가 가능한 장치에서 향상된 사용자 경험을 만들 수 있게 해주지만, 웹 콘텐츠의 대부분은 마우스 입력에 맞춰 설계된 경우가 많습니다.

이상적으로는 Ponter Events가 가능한 애플리케이션은 마우스 입력을 명시적으로 처리할 필요가 없습니다. pointerdown 이벤트를 취소함으로써 특정 마우스 이벤트의 생성을 방지할 수 있지만, 아래와 같은 몇 가지 문제점이 생길 수 있습니다.

• 마우스 이벤트는 포인터가 눌린 상태일 때만 방지할 수 있습니다.
• 버튼이 눌리지 않은 상태의 마우스(예: 마우스만 호버링 중인 경우)는 마우스 이벤트를 방지할 수 없습니다.
• mouseover, mouseout, mouseenter, mouseleave 이벤트는 포인터가 눌린 상태여도 절대 방지되지 않습니다.

이벤트 핸들러에서 수행하는 작업은 최소화

이벤트 핸들러 내에서 너무 많은 작업을 수행하면 성능 저하가 발생할 수 있습니다. 가능한 한 이벤트 핸들러 내의 작업을 간결하게 유지하세요.

이벤트 핸들러를 특정 대상 요소에 직접 추가

이벤트 핸들러를 문서 전체나 상위 노드에 추가하는 것보다는, 특정 대상 요소에 추가하는 것이 좋습니다. 이렇게 하면 이벤트 처리의 효율성을 높일 수 있습니다.

대상 요소가 충분히 커야 함

대상 요소(노드)의 크기는 가장 큰 접촉 표면 영역을 수용할 수 있을 만큼 충분히 커야 합니다 (손가락 터치가 가능해야함).

만약 대상 영역이 너무 작으면, 해당 요소를 터치했을 때 인접한 다른 요소의 이벤트가 발생할 수 있습니다.