포인터 이벤트

레벨 2

W3C 권고안

이 버전:
https://www.w3.org/TR/2019/REC-pointerevents2-20190404/
최신 공개 버전:
https://www.w3.org/TR/pointerevents2/
최신 편집자 초안:
https://w3c.github.io/pointerevents/
테스트 스위트:
https://wpt.fyi/pointerevents/
구현 보고서:
http://w3c.github.io/test-results/pointerevents/all.html
이전 버전:
https://www.w3.org/TR/2019/PR-pointerevents2-20190221/
최신 권고안:
https://www.w3.org/TR/pointerevents1/
편집자:
Matt Brubeck (Mozilla)
Rick Byers (Google)
Patrick H. Lauke (The Paciello Group)
Navid Zolghadr (Google)
참여:
GitHub w3c/pointerevents
버그 신고하기
커밋 기록
풀 리퀘스트
메일링 리스트:
메일링 리스트 보관함.

발행 이후 보고된 오류나 이슈는 정오표를 확인해 주세요.

Copyright © 2019 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and permissive document license rules apply.

요약

이 명세의 기능들은 포인터 이벤트의 기능을 확장하거나 수정합니다. 포인터 이벤트는 마우스, 펜, 터치스크린 등 다양한 하드웨어로부터의 포인터 입력을 처리하기 위한 이벤트 및 관련 인터페이스를 설명하는 W3C 권고안입니다. 기존 마우스 기반 콘텐츠와의 호환성을 위해, 이 명세는 다른 포인터 장치 유형에 대해 마우스 이벤트를 발생시키는 매핑도 설명합니다.

문서 상태

이 섹션은 발행 시점의 문서 상태를 설명합니다. 다른 문서가 이 문서를 대체할 수 있습니다. 현재 W3C 발행물과 이 기술 보고서의 최신 개정판은 W3C 기술 보고서 색인 https://www.w3.org/TR/에서 확인할 수 있습니다.

이 문서는 Pointer Events Working Group에서 권고안으로 발행하였습니다. 구현 보고서는 상호운용성을 보여줍니다. 이 문서는 [PointerEvents1]을 대체합니다.

이 명세는 [PointerEvents1]의 업데이트 버전으로, 해당 명세는 Microsoft Internet Explorer와 Microsoft Edge에서만 널리 제공되었으며(명세가 W3C 권고안으로 발행될 당시 Mozilla Firefox의 프리릴리즈 빌드에도 독립적으로 거의 상호운용 가능한 구현이 있었습니다). 레벨 2에는 편집상의 명확화, 새로운 기능, 그리고 설계의 일부 측면에 대해 제기된 한계와 문제를 해결하는 마이너한 호환성 깨짐이 포함되어 있어 더 넓은 브라우저 채택을 지원합니다.

이전 발행 이후 변경 사항은 없습니다.

이 명세에 대한 논의는 GitHub Issues를 통해 하는 것이 권장됩니다. 또는 메일링 리스트로 의견을 보낼 수 있습니다. 아래 주소로 보내주세요: public-pointer-events@w3.org (아카이브).

이 문서는 W3C 회원, 소프트웨어 개발자, W3C의 다른 그룹 및 관심 당사자에 의해 검토되었으며, W3C 디렉터에 의해 권고안으로 승인되었습니다. 이 문서는 안정적인 문서로 참고 자료로 사용하거나 다른 문서에서 인용될 수 있습니다. W3C의 역할은 명세에 주목하고 널리 배포를 장려하는 것입니다. 이는 웹의 기능성과 상호운용성을 강화합니다.

이 문서는 W3C 특허 정책에 따라 운영되는 그룹에서 작성되었습니다. W3C는 관련 특허 공개 목록을 공개적으로 유지하고 있습니다. 해당 페이지에는 특허 공개 방법도 안내되어 있습니다. 특정 특허에 대해 실제로 알고 있고, 그 특허가 필수 청구항을 포함한다고 판단되는 경우, W3C 특허 정책 6항에 따라 정보를 공개해야 합니다.

이 문서는 2019년 3월 1일 W3C 프로세스 문서에 따라 관리됩니다.

1. 소개

이 섹션은 비규범적입니다.

오늘날 대부분의 [HTML5] 콘텐츠는 마우스 입력과 함께 사용되거나 마우스 입력을 위해 설계되어 있습니다. 입력을 커스텀 방식으로 처리하는 경우 대부분 [UIEVENTS] 마우스 이벤트로 코딩합니다. 하지만 최근 컴퓨팅 장치에는 터치스크린, 펜 입력 등 다양한 입력 방식이 포함되어 있습니다. 각각의 입력을 개별적으로 처리하기 위한 이벤트 타입이 제안되어 왔으나, 이 방식은 새로운 입력 유형을 지원할 때 불필요한 로직 중복과 이벤트 처리 오버헤드가 발생합니다. 또한 콘텐츠가 한 가지 장치만을 염두에 두고 작성될 경우 호환성 문제가 발생합니다. 게다가 기존 마우스 기반 콘텐츠와의 호환성을 위해 대부분의 사용자 에이전트는 모든 입력 유형에 대해 마우스 이벤트를 발생시킵니다. 이 때문에 마우스 이벤트가 실제 마우스 장치에서 나온 것인지, 아니면 호환성을 위해 다른 입력 유형에서 생성된 것인지가 모호해져 두 장치에 동시에 대응하기 어려워집니다.

여러 입력 유형에 대응하는 코딩 비용을 줄이고, 마우스 이벤트의 위에서 설명한 모호함을 줄이기 위해, 이 명세서는 포인터라 불리는 좀 더 추상적인 입력 형태를 정의합니다. 포인터는 마우스 커서, 펜, 터치(멀티터치 포함) 등 화면에 접촉하는 모든 지점이나 기타 포인팅 입력 장치를 의미합니다. 이 모델은 사용자의 하드웨어에 관계없이 잘 동작하는 사이트와 애플리케이션을 쉽게 작성할 수 있도록 합니다. 장치별 처리가 필요한 경우를 위해, 이벤트를 발생시킨 장치 유형을 확인할 수 있는 속성도 정의되어 있습니다. 주요 목표는 모든 장치의 포인터 입력을 쉽게 처리할 수 있는 하나의 이벤트 및 인터페이스 집합을 제공하면서, 필요할 때만 장치별 처리를 할 수 있도록 하는 것입니다.

추가적인 주요 목표는 멀티스레드 사용자 에이전트가 스크립트 실행에 의존하지 않고 기본 터치 동작(예: 스크롤)을 처리할 수 있도록 하는 것입니다.

참고

이 명세서는 다양한 포인터 입력에 대한 통합 이벤트 모델을 정의하지만, 키보드나 키보드와 유사한 인터페이스(예: 터치스크린만 있는 기기에서 실행되는 화면낭독기 등 보조 기술로 포커스 가능한 컨트롤 및 요소를 순차적으로 탐색하는 경우) 등 다른 형태의 입력은 포함하지 않습니다. 사용자 에이전트가 이러한 인터페이스에 대해서도 포인터 이벤트를 생성하도록 선택할 수 있지만, 이 경우는 본 명세서의 범위에 포함되지 않습니다.

우선적으로, 저자들은 focus, blur, click 등 고수준 이벤트에 대응하여 모든 형태의 입력에서 동등한 기능을 제공하는 것이 권장됩니다. 그러나 저수준 이벤트(포인터 이벤트 등)를 사용할 경우 모든 입력 유형이 지원되도록 해야 합니다. 키보드 및 키보드형 인터페이스의 경우 명시적인 키보드 이벤트 처리가 추가로 필요할 수 있습니다. 자세한 내용은 WCAG 2.0 지침 2.1을 참조하세요.

포인터 입력은 마우스, 펜, 터치 등 다양한 입력을 결합합니다.
그림 1 포인터는 특정 좌표(또는 좌표 집합)를 타겟팅할 수 있는 입력 장치를 하드웨어 독립적으로 나타냅니다.

일반적인 포인터 입력 처리를 위한 이벤트는 마우스 이벤트와 매우 유사합니다: pointerdown, pointermove, pointerup, pointerover, pointerout 등. 이를 통해 마우스 이벤트에서 포인터 이벤트로 콘텐츠를 쉽게 이관할 수 있습니다. 포인터 이벤트는 마우스 이벤트에서 제공되는 일반 속성(클라이언트 좌표, 타겟 요소, 버튼 상태 등)에 더해 다른 입력 형태를 위한 속성(압력, 접촉 면적, 기울기 등)도 제공합니다. 따라서 저자들은 포인터 이벤트로 여러 입력 유형 간 로직을 쉽게 공유하고, 특정 입력 유형에만 맞춤화하여 최고의 경험을 제공할 수 있습니다.

포인터 이벤트는 다양한 입력 장치에서 발생하지만, 다른 장치별 이벤트에서 생성된 것으로 정의되지 않습니다. 호환성을 위해 가능하며 권장되지만, 이 명세서는 반드시 다른 장치별 이벤트(마우스 이벤트, 터치 이벤트 등)를 지원해야 한다고 요구하지 않습니다. 사용자 에이전트는 포인터 이벤트만 지원하고 다른 장치 이벤트는 지원하지 않을 수도 있습니다. 마우스 전용 이벤트로 작성된 콘텐츠와의 호환성을 위해, 이 명세서는 마우스가 아닌 장치의 포인터 입력을 바탕으로 호환성 마우스 이벤트를 생성하는 방법을 설명하는 선택적 섹션도 제공합니다.

참고

이 명세서는 [TOUCH-EVENTS]로 정의된 터치 이벤트와 포인터 이벤트를 모두 지원하는 사용자 에이전트의 예상 동작에 대해 조언하지 않습니다. 두 명세서의 관계에 대한 자세한 정보는 Touch Events Community Group을 참고하세요.

2. 적합성

비규범적으로 표시된 섹션뿐만 아니라, 이 명세서의 모든 저작 가이드라인, 다이어그램, 예제, 참고 사항은 모두 비규범적입니다. 그 외 나머지 모든 내용은 규범적입니다.

주요 키워드 MAY, MUST, MUST NOT, OPTIONAL, SHOULD, SHOULD NOT은 [RFC2119]에 명시된 바와 같이 해석되어야 합니다.

3. 예시

이 섹션은 비규범적입니다.

아래는 이 명세서의 API 사용 예시 저작 코드입니다.

예시 1: 기능 감지 및 이벤트 바인딩 
/* 포인터 이벤트 또는 기존 터치/마우스에 바인딩 */

if (window.PointerEvent) {
    // 포인터 이벤트가 지원되는 경우, 포인터 이벤트만 리스닝
    target.addEventListener("pointerdown", function(e) {
        // 필요시 e.pointerType에 따라 별도의 로직 적용
        // 터치/펜/마우스 동작별 처리
        ...
    });
    ...
} else {
    // 기존 터치/마우스 이벤트 핸들러
    target.addEventListener('touchstart', function(e) {
        // 호환성 마우스 이벤트 및 클릭 방지
        e.preventDefault();
        ...
    });
    ...
    target.addEventListener('mousedown', ...);
    ...
}

// 키보드 처리를 위한 추가 이벤트 리스너
...
예시 2: 사용자 입력 유형 감지 
window.addEventListener("pointerdown", detectInputType);

function detectInputType(event) {
    switch(event.pointerType) {
        case "mouse":
            /* 마우스 입력 감지 */
            break;
        case "pen":
            /* 펜/스타일러스 입력 감지 */
            break;
        case "touch":
            /* 터치 입력 감지 */
            break;
        default:
            /* pointerType이 비어 있거나(감지 불가),
            UA별 커스텀 타입일 수 있음 */
    }
}
예시 3: 기본 HTML5 캔버스 페인팅 애플리케이션 
<style>
  /* 내장 사용자 에이전트 터치 동작(예: 팬, 확대/축소) 비활성화:
  캔버스 요소의 모든 이벤트가 애플리케이션에 전달됨 */

  canvas { touch-action: none; }
</style>

<canvas id="drawSurface" width="500px" height="500px" style="border:1px solid black;"></canvas>

<script>
    var canvas = document.getElementById("drawSurface"),
    context = canvas.getContext("2d");

    if (window.PointerEvent) {
        canvas.addEventListener("pointermove", paint);
        if(window.navigator.maxTouchPoints>1)
           // 사용자 에이전트 및 하드웨어가 멀티터치 지원
           ...
    } else {
        // 포인터 이벤트를 지원하지 않는 사용자 에이전트용 대체 제공
        canvas.addEventListener("mousemove", paint);
    }

    function paint(event) {
        if(event.buttons>0)
           context.fillRect(event.clientX, event.clientY, 5, 5);
    }

    // 키보드 처리를 위한 추가 이벤트/함수
    ...
</script>
예시 4: 접촉 면적에 맞춰 요소 크기 조정 
<div style="position:absolute; top:0px; left:0px; width:100px;height:100px;"></div>
<script>
window.addEventListener("pointerdown", checkPointerSize);

function checkPointerSize(event) {
    event.target.style.width = event.width + "px";
    event.target.style.height = event.height + "px";
}
</script>
예시 5: 스크립트에서 신뢰되지 않은 포인터 이벤트 발생 
var event = new PointerEvent("pointerover",
  { bubbles: true,
    cancelable: true,
    composed: true,
    pointerId: 42,
    pointerType: "pen",
    clientX: 300,
    clientY: 500
  });
eventTarget.dispatchEvent(event);

4. 용어집

이 섹션은 비규범적입니다.

활성 버튼 상태
포인터의 buttons 속성이 0이 아닌 값을 갖는 상태를 의미합니다. 마우스의 경우, 최소 하나 이상의 버튼이 눌려 있을 때입니다. 터치의 경우, 디지타이저에 물리적으로 접촉하고 있을 때입니다. 펜의 경우, 펜이 디지타이저에 물리적으로 접촉하거나, 호버 중 최소 하나 이상의 버튼이 눌려 있을 때입니다.
활성 포인터
이벤트를 생성할 수 있는 터치 접촉, 펜 스타일러스, 마우스 커서, 기타 포인터를 의미합니다. 고유 pointerId로 식별되는 포인터가 문서 내에서 추가 이벤트를 생성할 수 있다면, 해당 포인터는 여전히 활성 상태로 간주됩니다. 예시:
  • 장치에 연결된 마우스는 항상 활성 상태입니다.
  • 화면 위의 터치 접촉은 활성 상태로 간주됩니다.
  • 터치 접촉이나 펜 스타일러스가 디지타이저 범위 밖으로 들어올려지면 더 이상 활성 상태가 아닙니다.
참고
일부 플랫폼에서는 활성 포인터의 집합에 사용자 에이전트가 타겟이 아닌 입력(예: 다른 애플리케이션을 타겟으로 하는 입력)까지 모든 포인터 입력이 포함될 수 있습니다.
참고
각 활성 포인터는 최상위 브라우징 컨텍스트([HTML5]에서 정의됨) 범위 내에서는 동일한 id를 가져야 합니다. 그러나 여러 최상위 브라우징 컨텍스트 간에는 이러한 보장이 없습니다.
취소된 이벤트
기본 동작이 preventDefault()나 이벤트 핸들러에서 false를 반환하거나, [UIEVENTS] 및 [HTML5]에 정의된 다른 방법으로 방지된 이벤트입니다.
접촉 기하
디지타이저에서 입력(대부분 터치)의 경계 박스입니다. 이는 일반적으로 단일 픽셀보다 입력 해상도가 더 낮은 장치를 의미합니다. 일부 장치는 이 데이터를 보고하지 않을 수 있습니다.
디지타이저
표면이 접촉 또는 근접한 입력을 감지할 수 있는 입력 감지 장치 유형입니다. 일반적으로 터치 접촉이나 펜 스타일러스의 입력을 감지하는 표면입니다.
히트 테스트
사용자 에이전트가 포인터 이벤트의 타겟 요소를 결정하는 과정입니다. 일반적으로 포인터의 위치와 문서의 시각적 레이아웃을 고려하여 화면 미디어에서 결정됩니다.
포인터
마우스, 펜, 터치 접촉 등 화면의 특정 좌표(또는 좌표 집합)를 타겟팅할 수 있는 입력 장치를 하드웨어 독립적으로 나타내는 개념입니다.
사용자 에이전트
클라이언트 머신에서 실행되는 브라우저나 콘텐츠 저작 도구와 같은 프로그램으로, 사용자를 대신해 콘텐츠를 검색, 해석, 실행, 표시 또는 생성합니다.
작업 대기열에 추가
[HTML5]에 정의된 관련 이벤트 루프의 이벤트 작업 대기열에 작업을 추가하는 것을 의미합니다.

5. 포인터 이벤트 및 인터페이스

5.1 PointerEvent 인터페이스

dictionary PointerEventInit : MouseEventInit {
    long        pointerId = 0;
    double      width = 1;
    double      height = 1;
    float       pressure = 0;
    float       tangentialPressure = 0;
    long        tiltX = 0;
    long        tiltY = 0;
    long        twist = 0;
    DOMString   pointerType = "";
    boolean     isPrimary = false;
};

[Constructor(DOMString type, optional PointerEventInit eventInitDict), Exposed=Window]
interface PointerEvent : MouseEvent {
    readonly        attribute long        pointerId;
    readonly        attribute double      width;
    readonly        attribute double      height;
    readonly        attribute float       pressure;
    readonly        attribute float       tangentialPressure;
    readonly        attribute long        tiltX;
    readonly        attribute long        tiltY;
    readonly        attribute long        twist;
    readonly        attribute DOMString   pointerType;
    readonly        attribute boolean     isPrimary;
};
pointerId

이 이벤트를 발생시킨 포인터의 고유 식별자입니다. 이 식별자는 해당 시점의 활성 포인터 전체에서 최상위 브라우징 컨텍스트([HTML5]에서 정의됨) 내에서 반드시 고유해야 합니다. 필요시 사용자 에이전트는 이전에 사용된 pointerId 값을 재사용할 수 있습니다.

참고

pointerId 선택 알고리즘은 구현별로 다릅니다. 따라서 저자들은 값이 단순히 활성 포인터를 고유하게 식별하는 용도 외에 어떤 의미를 전달한다고 가정해서는 안 됩니다. 예를 들어, 사용자 에이전트는 활성 포인터마다 1부터 순서대로 번호를 지정할 수 있지만, 이 값들이 반드시 증가하는 것은 보장되지 않습니다. 다른 사용자 에이전트는 완전히 무작위로 고유한 번호를 지정할 수 있습니다. 이런 경우 사용자 에이전트는 반드시 현재 페이지 수명 동안만 동일한 pointerId를 유지하며, 새 pointerId 값은 예측 불가능해야 합니다(예: 암호학적으로 강한 난수로 생성) — 이는 사용자가 서로 다른 페이지에서 고유하게 식별되거나 추적될 가능성을 최소화하기 위함입니다.

width

포인터의 접촉 기하의 너비(X축 크기, CSS 픽셀 기준, [CSS21] 참조)입니다. 이 값은 하나의 포인터에 대해 이벤트마다 업데이트될 수 있습니다. 일반적으로 접촉 기하가 없는 입력(예: 기존 마우스)과 실제 입력 기하가 하드웨어로 감지되지 않는 경우, 사용자 에이전트는 반드시 기본값 1을 반환해야 합니다.

height

포인터의 접촉 기하의 높이(Y축 크기, CSS 픽셀 기준, [CSS21] 참조)입니다. 이 값은 하나의 포인터에 대해 이벤트마다 업데이트될 수 있습니다. 일반적으로 접촉 기하가 없는 입력(예: 기존 마우스)과 실제 입력 기하가 하드웨어로 감지되지 않는 경우, 사용자 에이전트는 반드시 기본값 1을 반환해야 합니다.

pressure

포인터 입력의 정규화된 압력값으로, [0,1] 범위 내에서 0과 1은 각각 하드웨어가 감지할 수 있는 최소 및 최대 압력을 의미합니다. 압력을 지원하지 않는 하드웨어나 플랫폼의 경우, 반드시 활성 버튼 상태일 때 0.5, 그 외에는 0이어야 합니다. 참고: 모든 pointerup 이벤트의 pressure는 0입니다.

tangentialPressure

포인터 입력의 정규화된 접선 압력(또는 배럴 압력)으로, 일반적으로 추가 컨트롤(예: 에어브러시 스타일러스의 휠)에 의해 조절됩니다. [-1,1] 범위이며, 0은 컨트롤의 중립 위치입니다. 일부 하드웨어는 [0,1]의 양수만 지원할 수 있습니다. 접선 압력을 지원하지 않는 하드웨어나 플랫폼에서는 반드시 값이 0이어야 합니다.

tiltX

Y-Z 평면과 트랜스듀서(예: 펜 스타일러스) 축과 Y축이 포함된 평면 사이의 평면 각도(도 단위, [-90,90] 범위)입니다. 양수 tiltX는 오른쪽을 의미합니다. tiltX와 tiltY를 함께 사용해 트랜스듀서가 디지타이저의 법선에서 얼마나 기울었는지 나타낼 수 있습니다. 기울기를 보고하지 않는 하드웨어나 플랫폼에서는 반드시 값이 0이어야 합니다.

tiltX 설명 다이어그램
그림 2 양수 tiltX.
tiltY

X-Z 평면과 트랜스듀서(예: 펜 스타일러스) 축과 X축이 포함된 평면 사이의 평면 각도(도 단위, [-90,90] 범위)입니다. 양수 tiltY는 사용자 쪽을 의미합니다. tiltY와 tiltX를 함께 사용해 트랜스듀서가 디지타이저의 법선에서 얼마나 기울었는지 나타낼 수 있습니다. 기울기를 보고하지 않는 하드웨어나 플랫폼에서는 반드시 값이 0이어야 합니다.

tiltY 설명 다이어그램
그림 3 음수 tiltY.
twist

트랜스듀서(예: 펜 스타일러스)의 자체 주요 축을 중심으로 한 시계 방향 회전(도 단위, [0,359] 범위)입니다. 트위스트를 보고하지 않는 하드웨어나 플랫폼에서는 반드시 값이 0이어야 합니다.

pointerType

이벤트를 발생시킨 장치 유형을 나타냅니다(마우스, 펜, 터치 등). 사용자 에이전트가 마우스, 펜 스타일러스 또는 터치 입력 장치에 대해 포인터 이벤트를 발생시킬 경우 pointerType의 값은 아래 표와 같아야 합니다:

포인터 장치 유형 pointerType 값
마우스 mouse
펜 스타일러스 pen
터치 접촉 touch

장치 유형을 사용자 에이전트가 감지할 수 없는 경우, 값은 반드시 빈 문자열이어야 합니다. 위에 나열된 것 외의 포인터 장치 유형을 지원하는 사용자 에이전트의 경우 pointerType 값은 벤더 프리픽스를 사용해 서로 다른 장치 유형 간의 이름 충돌을 방지하는 것이 좋습니다. 향후 명세에서는 다른 장치에 대한 추가 규범 값이 제공될 수 있습니다.

참고
pointerType 활용 예제는 예시 2를 참고하세요. 또한 개발자는 사용자 에이전트가 자체적으로 커스텀 pointerType 값을 구현하거나 pointerType이 빈 문자열인 경우를 위한 기본 처리 로직을 포함해야 합니다.
isPrimary

이 포인터가 해당 포인터 유형의 주 포인터를 나타내는지 여부입니다.

PointerEventInit 딕셔너리는 PointerEvent 인터페이스의 생성자에서 신뢰되지 않은(합성) 포인터 이벤트를 생성할 수 있는 메커니즘을 제공합니다. 이 딕셔너리는 [UIEVENTS]에 정의된 MouseEventInit 딕셔너리를 상속합니다. 이벤트 생성 단계는 [DOM4]에 정의되어 있습니다. 예시에서 신뢰되지 않은 포인터 이벤트를 발생시키는 샘플 코드를 참고할 수 있습니다.

참고
PointerEvent 인터페이스는 [UIEVENTS]에 정의되고 [CSSOM-VIEW]에서 확장된 MouseEvent를 상속합니다.

5.1.1 버튼 상태

5.1.1.1 조합 버튼 상호작용

마우스나 펜과 같은 일부 포인터 장치는 여러 개의 버튼을 지원합니다. [UIEVENTS] 마우스 이벤트 모델에서는 각 버튼 눌림마다 mousedown 및 mouseup 이벤트가 발생합니다. 이 하드웨어 차이를 더 잘 추상화하고 장치 간 입력 저작을 단순화하기 위해, 포인터 이벤트는 조합 버튼 누름(포인터 장치의 다른 버튼이 이미 눌려진 상태에서 추가 버튼을 누르는 경우)에 대해 중첩된 pointerdown 및 pointerup 이벤트를 발생시키지 않습니다.

대신, 조합 버튼 누름은 button 및 buttons 속성의 변화를 검사하여 감지할 수 있습니다. button과 buttons 속성은 [UIEVENTS] MouseEvent 인터페이스에서 상속되었지만, 다음 섹션에서 설명하는 대로 의미와 값이 변경되었습니다.

참고
button 및 buttons 속성에 대한 수정은 포인터 이벤트에만 적용됩니다. 호환성 마우스 이벤트의 경우 button 및 buttons의 값은 [UIEVENTS]을 따라야 합니다.
5.1.1.2 button 속성

모든 포인터 이벤트(단순히 pointerdown과 pointerup뿐만 아니라)에서 버튼 상태 전환을 식별하기 위해, button 속성은 이벤트를 발생시킨 장치 버튼을 나타냅니다.

장치 버튼 변화 button
이전 이벤트 이후 버튼 및 터치/펜 접촉 변화 없음 -1
왼쪽 마우스,
터치 접촉,
펜 접촉		 0
가운데 마우스 1
오른쪽 마우스,
펜 배럴 버튼		 2
X1(뒤로가기) 마우스 3
X2(앞으로가기) 마우스 4
펜 지우개 버튼 5
참고
마우스 드래그 중에는 pointermove 이벤트의 button 값이 mousemove 이벤트와 다릅니다. 예를 들어, 오른쪽 버튼을 누른 채 마우스를 이동할 때, pointermove 이벤트의 button 값은 -1이지만 mousemove 이벤트의 button 값은 2입니다.
5.1.1.3 buttons 속성

buttons 속성은 장치 버튼의 현재 상태를 비트마스크로 제공합니다(MouseEvent와 동일하지만, 가능한 값의 집합이 더 확장됨).

장치 버튼의 현재 상태 buttons
버튼을 누르지 않고 마우스 이동,
버튼을 누르지 않고 펜 호버 이동		 0
왼쪽 마우스,
터치 접촉,
펜 접촉		 1
가운데 마우스 4
오른쪽 마우스,
펜 배럴 버튼		 2
X1(뒤로가기) 마우스 8
X2(앞으로가기) 마우스 16
펜 지우개 버튼 32

5.1.2 주 포인터

멀티 포인터(예: 멀티터치) 시나리오에서는 isPrimary 속성을 사용하여 각 포인터 유형의 활성 포인터 집합 중에서 마스터 포인터를 식별합니다.

  • 특정 시점에는 각 포인터 유형별로 최대 하나의 주 포인터만 존재할 수 있습니다.
  • 특정 포인터 유형에 대해 최초로 활성화된 포인터(예: 멀티터치에서 최초로 화면에 닿은 손가락)가 해당 포인터 유형의 주 포인터가 됩니다.
  • 주 포인터만 호환성 마우스 이벤트를 발생시킵니다. 여러 주 포인터가 존재하는 경우, 이 포인터들은 모두 호환성 마우스 이벤트를 발생시킵니다.
참고
단일 포인터 상호작용이 필요한 저자라면 비주 포인터를 무시하여 구현할 수 있습니다(단, 여러 주 포인터에 대한 아래 참고를 확인하세요).
참고
두 가지 이상의 포인터 장치 유형이 동시에 사용되는 경우, 각 pointerType별로 하나씩 여러 포인터가 주 포인터로 간주됩니다. 예를 들어, 터치 접촉과 마우스 커서를 동시에 움직이면 두 포인터 모두 주 포인터로 간주됩니다.
참고
일부 장치, 운영체제 및 사용자 에이전트는 여러 종류의 포인터 입력 동시 사용을 무시하여 우발적 상호작용을 방지할 수 있습니다. 예를 들어, 터치와 펜 입력을 모두 지원하는 장치에서는 펜 사용 중에 터치 입력을 무시하여 사용자가 펜 사용 중 손을 화면에 올려놓을 수 있도록(일명 "팜 리젝션") 처리합니다. 현재 저자가 이 동작을 억제할 방법은 없습니다.
참고
경우에 따라 사용자 에이전트가 어떠한 포인터도 주 포인터로 표시하지 않는 포인터 이벤트를 발생시킬 수 있습니다. 예를 들어, 특정 유형의 활성 포인터가 여러 개(예: 멀티터치) 있고 주 포인터가 제거된 경우(예: 화면에서 떠난 경우)에는 주 포인터 이벤트가 없습니다. 또한 주 포인터 결정이 장치의 모든 활성 포인터(사용자 에이전트가 아닌 애플리케이션을 타겟으로 하는 입력 포함)를 기준으로 이루어지는 플랫폼에서는 첫 번째 터치가 사용자 에이전트 외부를 타겟하고, 두 번째(멀티터치) 터치가 사용자 에이전트 내부를 타겟할 경우, 두 번째 접촉의 포인터 이벤트는 isPrimary 값이 false로 발생할 수 있습니다.
참고
현재 운영체제 및 사용자 에이전트는 일반적으로 다중 마우스 입력 개념을 갖고 있지 않습니다. 두 개 이상의 마우스 장치가 있을 때(예: 노트북의 트랙패드와 외부 마우스) 모든 마우스 장치는 하나의 마우스 장치로 취급되며, 어떤 장치에서든 움직임은 단일 마우스 포인터의 움직임으로 변환되고, 각각의 마우스 장치별 버튼 누름도 구분하지 않습니다. 따라서 일반적으로 하나의 마우스 포인터만 존재하고, 그 포인터가 주 포인터가 됩니다.

5.1.3 PointerEvent 인터페이스를 사용한 이벤트 발생

이름이 e인 포인터 이벤트를 발생시킨다는 것은 [DOM4]에 정의된 이름이 e인 이벤트를 발생시킨다의 의미로, PointerEvent 인터페이스를 사용하는 이벤트를 PointerEvent 인터페이스 및 속성과 기본 동작에 따라 속성 값을 설정하여 발생시키는 것을 의미합니다.

이 이벤트가 gotpointercapture나 lostpointercapture가 아니라면, 이 PointerEvent에 대해 대기 중인 포인터 캡처 처리 단계를 수행합니다.

이벤트가 발생하는 대상 객체는 다음과 같이 결정됩니다:

이 이벤트가 pointerdown이고, 연관된 장치가 직접 조작 장치이며, 대상이 Element인 경우, 포인터 캡처 설정에 따라 해당 pointerId의 캡처를 대상 요소에 설정합니다(암시적 포인터 캡처).

결정된 대상으로 이벤트를 발생시킵니다.

참고
포인터 캡처 대상 오버라이드를 정상적인 히트 테스트 결과 대신 대상으로 사용할 경우 일부 경계 이벤트가 발생할 수 있습니다. 이는 포인터가 이전 대상에서 새 캡처 대상으로 이동하는 것과 같으므로 서로 다른 대상일 경우 경계 이벤트가 먼저 디스패치되어야 합니다. 캡처가 해제될 때도 동일하게, 포인터가 캡처 대상을 떠나 히트 테스트 대상으로 이동하는 시나리오가 발생할 수 있습니다.
5.1.3.1 속성과 기본 동작

이 명세서에 정의된 이벤트 타입의 bubbles, cancelable 속성과 기본 동작은 아래 표에 나타납니다. 각 이벤트 타입의 세부사항은 포인터 이벤트 타입에서 설명합니다.

이벤트 타입 Bubbles Cancelable 기본 동작
pointerover Yes Yes 없음
pointerenter No No 없음
pointerdown Yes Yes 다름: 포인터가 주 포인터일 때는 mousedown 이벤트의 모든 기본 동작
이 이벤트를 취소하면 해당 pointerType에 PREVENT MOUSE EVENT 플래그가 설정되어 이후 특정 호환성 마우스 이벤트 발생이 방지됩니다.
pointermove Yes Yes 다름: 포인터가 주 포인터일 때는 mousemove의 모든 기본 동작
pointerup Yes Yes 다름: 포인터가 주 포인터일 때는 mouseup의 모든 기본 동작
pointercancel Yes No 없음
pointerout Yes Yes 없음
pointerleave No No 없음
gotpointercapture Yes No 없음
lostpointercapture Yes No 없음

위 표의 모든 포인터 이벤트(단 pointerenter, pointerleave 제외)에 대해 composed ([DOM4]) 속성은 true이어야 합니다. 위의 모든 포인터 이벤트에 대해 detail ([UIEVENTS]) 속성은 0이어야 합니다.

참고
많은 사용자 에이전트는 레거시 콘텐츠 지원을 위해 MouseEvent에 비표준 속성 fromElement와 toElement를 노출합니다. 해당 사용자 에이전트에서는 PointerEvent(상속됨)에서 이 속성 값이 null이어야 하며, 표준화된 대체 속성(target과 relatedTarget) 사용을 권장합니다.

MouseEvents [UIEVENTS]와 유사하게, relatedTarget은 포인터가 방금 떠난 경계의 요소(pointerover 또는 pointerenter 이벤트의 경우) 또는 포인터가 진입하는 경계의 요소(pointerout 또는 pointerleave 이벤트의 경우)로 초기화되어야 합니다. 다른 포인터 이벤트의 경우 이 값은 기본적으로 null입니다. 요소가 포인터 캡처를 획득하면 해당 포인터의 이후 모든 이벤트는 해당 요소의 경계 내에서 발생한 것으로 간주됩니다.

gotpointercapture 및 lostpointercapture의 경우, 위 표에 정의된 속성을 제외한 나머지 모든 속성은 사용자 에이전트가 대기 중인 포인터 캡처 처리를 수행하고 gotpointercapture, lostpointercapture 이벤트를 발생시킨 포인터 이벤트와 동일해야 합니다.

5.1.3.2 대기 중인 포인터 캡처 처리

사용자 에이전트는 포인터 캡처를 암시적으로 해제할 때와 gotpointercapture 또는 lostpointercapture가 아닌 포인터 이벤트를 발생시킬 때 반드시 다음 단계를 실행해야 합니다.

  1. 이 포인터의 pointer capture target override가 설정되어 있고, pending pointer capture target override와 같지 않다면, pointer capture target override 노드에서 lostpointercapture라는 포인터 이벤트를 발생시킵니다.
  2. 이 포인터의 pending pointer capture target override가 설정되어 있고, pointer capture target override와 같지 않다면, pending pointer capture target override에서 gotpointercapture라는 포인터 이벤트를 발생시킵니다.
  3. pointer capture target override를 pending pointer capture target override로 설정합니다(설정된 경우). 아니면 pointer capture target override를 해제합니다.

5.2 포인터 이벤트 타입

아래는 이 명세서에서 정의된 이벤트 타입입니다.

주 포인터의 경우, 이 이벤트들(gotpointercapture와 lostpointercapture 제외)은 호환성 마우스 이벤트도 발생할 수 있습니다.

5.2.1 pointerover 이벤트

사용자 에이전트는 포인팅 장치가 요소의 히트 테스트 경계로 이동할 때 반드시 이름이 pointerover인 포인터 이벤트를 발생시켜야 합니다. setPointerCapture 또는 releasePointerCapture가 히트 테스트 타겟을 변경할 수 있으며, 포인터가 캡처된 동안에는 경계 이벤트 발생 목적상 항상 캡처 대상의 경계 내에 있다고 간주합니다. 호버를 지원하지 않는 장치의 경우 pointerdown 이벤트를 발생시키기 전에 반드시 이 이벤트도 발생해야 합니다( pointerdown 참조 ).

5.2.2 pointerenter 이벤트

사용자 에이전트는 포인팅 장치가 요소 또는 그 자손 요소의 히트 테스트 경계로 이동할 때, 또는 호버를 지원하지 않는 장치의 pointerdown 이벤트 결과로 반드시 이름이 pointerenter인 포인터 이벤트를 발생시켜야 합니다( pointerdown 참조 ). setPointerCapture 또는 releasePointerCapture가 히트 테스트 타겟을 변경할 수 있으며, 포인터가 캡처된 동안에는 경계 이벤트 발생 목적상 항상 캡처 대상의 경계 내에 있다고 간주합니다. 이 이벤트 타입은 pointerover와 유사하지만, 버블링되지 않는다는 점이 다릅니다.

참고
이 이벤트 타입은 [UIEVENTS]에서 설명된 mouseenter 이벤트, [CSS21]의 CSS :hover 의사 클래스와 유사합니다. pointerleave 이벤트도 참고하세요.

5.2.3 pointerdown 이벤트

포인터가 활성 버튼 상태에 진입할 때, 사용자 에이전트는 반드시 이름이 pointerdown인 포인터 이벤트를 발생시켜야 합니다. 마우스의 경우 버튼이 눌리지 않은 상태에서 하나 이상의 버튼이 눌린 상태로 전환될 때입니다. 터치는 디지타이저와 물리적으로 접촉할 때입니다. 펜은 디지타이저와 접촉하면서 버튼이 눌리지 않은 상태이거나, 호버 중 버튼이 눌리지 않은 상태에서 하나 이상의 버튼이 눌린 상태로 전환될 때입니다.

참고
마우스(또는 다중 버튼 포인터 장치)의 경우 pointerdown과 pointerup은 mousedown 및 mouseup과 같은 모든 상황에서 발생하지 않습니다. 자세한 내용은 조합 버튼을 참고하세요.

호버를 지원하지 않는 장치의 경우, 반드시 pointerdown 이벤트를 디스패치하기 전에 이름이 pointerover인 포인터 이벤트와 pointerenter 포인터 이벤트를 연속적으로 발생시켜야 합니다.

참고
저자는 pointerdown 이벤트를 취소함으로써( isPrimary 속성이 true일 때 ) 특정 호환성 마우스 이벤트 발생을 방지할 수 있습니다. 이 경우 포인터에 PREVENT MOUSE EVENT 플래그가 설정됩니다. 단, mouseover, mouseenter, mouseout, mouseleave 이벤트 발생은 방지되지 않습니다.

5.2.4 pointermove 이벤트

포인터의 좌표가 변경될 때, 사용자 에이전트는 반드시 이름이 pointermove인 포인터 이벤트를 발생시켜야 합니다. 또한 포인터의 버튼 상태, 압력, 접선 압력, 기울기, 트위스트, 접촉 기하(예: width 및 height) 등이 변경되고, 그 상황에서 이 명세서의 다른 포인터 이벤트가 발생하지 않을 때에도 반드시 pointermove 이벤트를 발생시켜야 합니다.

5.2.5 pointerup 이벤트

포인터가 활성 버튼 상태를 벗어날 때, 사용자 에이전트는 반드시 이름이 pointerup인 포인터 이벤트를 발생시켜야 합니다. 마우스의 경우 하나 이상의 버튼이 눌린 상태에서 모두 해제될 때입니다. 터치의 경우 디지타이저에서 물리적 접촉이 해제될 때입니다. 펜의 경우 버튼이 눌리지 않은 상태에서 디지타이저 접촉이 해제되거나, 호버 중 하나 이상의 버튼이 눌린 상태에서 모두 해제될 때입니다.

호버를 지원하지 않는 장치의 경우, 반드시 pointerup 이벤트를 디스패치한 후 이름이 pointerout인 포인터 이벤트와 pointerleave 포인터 이벤트를 연속적으로 발생시켜야 합니다.

참고
마우스(또는 다중 버튼 포인터 장치)의 경우 pointerdown과 pointerup은 mousedown 및 mouseup과 같은 모든 상황에서 발생하지 않습니다. 자세한 내용은 조합 버튼을 참고하세요.

5.2.6 pointercancel 이벤트

사용자 에이전트는 다음 상황에서 반드시 이름이 pointercancel인 포인터 이벤트를 발생시켜야 합니다:

  • 사용자 에이전트가 포인터가 이벤트를 계속 생성할 가능성이 낮다고 판단한 경우(예: 하드웨어 이벤트 등).
  • pointerdown 이벤트 발생 후, 해당 포인터가 페이지 뷰포트 조작(예: 팬 또는 확대/축소)에 사용된 경우.
    참고
    사용자 에이전트는 여러 포인터 타입(터치, 펜 등)을 통해 팬 또는 확대/축소를 트리거할 수 있으며, 따라서 팬 또는 확대/축소 동작 시작 시 다양한 포인터, 서로 다른 포인터 타입의 포인터들도 취소될 수 있습니다.
  • 드래그 작업 시작 [HTML] 직전에, 드래그 작업을 유발한 포인터에 대해.
    참고
    드래그 작업 시작이 어떤 방법으로든 방지된 경우(예: dragstart 이벤트에서 preventDefault 호출 등) pointercancel 이벤트는 발생하지 않습니다.

pointercancel 이벤트 발생 후, 사용자 에이전트는 반드시 pointerout 이벤트를 발생시키고 이어서 pointerleave 이벤트를 발생시켜야 합니다.

참고

이 섹션은 비규범적입니다.

사용자 에이전트가 포인터가 이벤트를 계속 생성할 가능성이 낮다고 판단하는 시나리오 예시:

  • 포인터가 활성화된 상태에서 장치의 화면 방향이 변경됨.
  • 사용자가 장치가 지원하는 동시 포인터 수보다 더 많은 포인터를 입력함.
  • 사용자 에이전트가 입력을 우발적 입력으로 해석함(예: 하드웨어가 팜 리젝션을 지원함).
  • 사용자 에이전트가 입력을 팬 또는 확대/축소 제스처로 해석함.

장치의 화면 방향 변경, 우발적 입력 인식, 포인터로 뷰포트 조작(예: 팬 또는 확대/축소) 등은 이 명세서의 범위에 포함되지 않습니다.

5.2.7 pointerout 이벤트

다음 상황 중 하나가 발생하면 사용자 에이전트는 반드시 이름이 pointerout인 포인터 이벤트를 발생시켜야 합니다:

  • 포인팅 장치가 요소의 히트 테스트 경계를 벗어날 때. setPointerCapture 또는 releasePointerCapture가 히트 테스트 타겟을 변경할 수 있으며, 포인터가 캡처된 동안에는 경계 이벤트 발생 목적상 항상 캡처 대상의 경계 내에 있다고 간주합니다.
  • 호버를 지원하지 않는 장치에 대해 pointerup 이벤트 발생 후( pointerup 참조 ).
  • pointercancel 이벤트 발생 후( pointercancel 참조 ).
  • 펜 스타일러스가 디지타이저가 감지할 수 있는 호버 범위를 벗어날 때.

5.2.8 pointerleave 이벤트

포인팅 장치가 요소 및 모든 자손 요소의 히트 테스트 경계를 벗어날 때, 또는 호버를 지원하지 않는 장치의 pointerup, pointercancel 이벤트 결과로, 사용자 에이전트는 반드시 이름이 pointerleave인 포인터 이벤트를 발생시켜야 합니다( pointerup, pointercancel 참조 ). setPointerCapture 또는 releasePointerCapture가 히트 테스트 타겟을 변경할 수 있으며, 포인터가 캡처된 동안에는 경계 이벤트 발생 목적상 항상 캡처 대상의 경계 내에 있다고 간주합니다. 사용자 에이전트는 펜 스타일러스가 디지타이저가 감지할 수 있는 호버 범위를 벗어날 때에도 반드시 pointerleave 이벤트를 발생시켜야 합니다. 이 이벤트 타입은 pointerout과 유사하지만, 버블링되지 않고, 포인팅 장치가 요소 및 모든 자손의 경계를 벗어나기 전에는 반드시 발생하지 않아야 합니다.

참고
이 이벤트 타입은 [UIEVENTS]에서 설명된 mouseleave 이벤트, [CSS21]의 CSS :hover 의사 클래스와 유사합니다. pointerenter 이벤트도 참고하세요.

5.2.9 gotpointercapture 이벤트

요소가 포인터 캡처를 획득할 때, 사용자 에이전트는 반드시 이름이 gotpointercapture인 포인터 이벤트를 발생시켜야 합니다. 이 이벤트는 포인터 캡처를 획득하는 요소에서 발생합니다. 이후 해당 포인터에 대한 이벤트는 모두 이 요소에서 발생합니다. 포인터 캡처 설정 및 대기 중인 포인터 캡처 처리 섹션도 참고하세요.

5.2.10 lostpointercapture 이벤트

포인터의 캡처가 해제된 후, 사용자 에이전트는 반드시 이름이 lostpointercapture인 포인터 이벤트를 발생시켜야 합니다. 이 이벤트는 캡처가 해제된 요소에서 발생합니다. 이후 해당 포인터에 대한 이벤트는 이벤트 타겟 결정 시 일반적인 히트 테스트 메커니즘(이 명세서 범위 외)을 따릅니다. 포인터 캡처 해제, 암시적 포인터 캡처 해제, 대기 중인 포인터 캡처 처리 섹션도 참고하세요.

6. Element 인터페이스의 확장

다음 섹션에서는 포인터 캡처 설정 및 해제를 쉽게 하기 위해 [HTML5]에 정의된 기존 Element 인터페이스에 대한 확장을 설명합니다. 

partial interface Element {
  void setPointerCapture (long pointerId);
  void releasePointerCapture (long pointerId);
  boolean hasPointerCapture (long pointerId);
};
setPointerCapture

이 메서드가 호출된 요소에서 인자로 지정된 pointerId에 해당하는 포인터에 대해 포인터 캡처를 설정합니다. 이후 해당 포인터의 이벤트는 항상 캡처한 대상 위에 있는 것처럼 정상적인 히트 테스트 결과 대신 캡처 대상 요소를 타겟으로 하며, 캡처가 해제될 때까지 항상 이 요소를 타겟으로 해야 합니다. 포인터가 활성 버튼 상태여야만 효과가 있으며 그렇지 않으면 조용히 실패합니다. 인자로 전달된 값이 활성 포인터 중 아무것도 일치하지 않으면 NotFoundError라는 이름의 DOMException을 발생시킵니다.

releasePointerCapture

이 메서드가 호출된 요소에서 인자로 지정된 pointerId에 해당하는 포인터의 포인터 캡처를 해제합니다. 이후 해당 포인터의 이벤트 타겟 결정은 정상적인 히트 테스트 메커니즘(이 명세서의 범위 외)을 따릅니다. 인자로 전달된 값이 활성 포인터 중 아무것도 일치하지 않으면 NotFoundError라는 이름의 DOMException을 발생시킵니다.

hasPointerCapture

이 메서드가 호출된 요소가 인자로 지정된 pointerId에 대해 포인터 캡처를 가지고 있는지 나타냅니다. 특히, 해당 pointerId의 대기 중인 포인터 캡처 대상 오버라이드가 이 요소로 설정되어 있으면 true를 반환하며, 그렇지 않으면 false를 반환합니다.

참고
이 메서드는 setPointerCapture를 호출한 직후에도 gotpointercapture 이벤트를 아직 받지 않았어도 true를 반환합니다. 따라서 pointerdown 이벤트 리스너 내부에서 암시적 포인터 캡처를 감지하는 데 유용할 수 있습니다.

7. GlobalEventHandlers 믹스인의 확장

다음 섹션에서는 이벤트 핸들러 등록을 쉽게 하기 위해 [HTML5]에 정의된 기존 GlobalEventHandlers 믹스인에 대한 확장을 설명합니다.

partial interface mixin GlobalEventHandlers {
    attribute EventHandler ongotpointercapture;
    attribute EventHandler onlostpointercapture;
    attribute EventHandler onpointerdown;
    attribute EventHandler onpointermove;
    attribute EventHandler onpointerup;
    attribute EventHandler onpointercancel;
    attribute EventHandler onpointerover;
    attribute EventHandler onpointerout;
    attribute EventHandler onpointerenter;
    attribute EventHandler onpointerleave;
};
ongotpointercapture
gotpointercapture 이벤트 타입에 대한 이벤트 핸들러 IDL 속성([HTML5] 참조).
onlostpointercapture
lostpointercapture 이벤트 타입에 대한 이벤트 핸들러 IDL 속성([HTML5] 참조).
onpointerdown
pointerdown 이벤트 타입에 대한 이벤트 핸들러 IDL 속성([HTML5] 참조).
onpointermove
pointermove 이벤트 타입에 대한 이벤트 핸들러 IDL 속성([HTML5] 참조).
onpointerup
pointerup 이벤트 타입에 대한 이벤트 핸들러 IDL 속성([HTML5] 참조).
onpointercancel
pointercancel 이벤트 타입에 대한 이벤트 핸들러 IDL 속성([HTML5] 참조).
onpointerover
pointerover 이벤트 타입에 대한 이벤트 핸들러 IDL 속성([HTML5] 참조).
onpointerout
pointerout 이벤트 타입에 대한 이벤트 핸들러 IDL 속성([HTML5] 참조).
onpointerenter
pointerenter 이벤트 타입에 대한 이벤트 핸들러 IDL 속성([HTML5] 참조).
onpointerleave
pointerleave 이벤트 타입에 대한 이벤트 핸들러 IDL 속성([HTML5] 참조).

8. Navigator 인터페이스의 확장

Navigator 인터페이스는 [HTML5]에 정의되어 있습니다. 이 명세서는 Navigator 인터페이스를 확장하여 장치 감지 기능을 제공합니다.

partial interface Navigator {
    readonly  attribute long maxTouchPoints;
};
maxTouchPoints

장치에서 동시에 지원되는 최대 터치 접촉 개수입니다. 여러 디지타이저(예: 여러 터치스크린)가 있는 경우, 각 디지타이저별 최대 지원 접촉 수 중 가장 큰 값을 반드시 사용해야 합니다.

예를 들어, 한 장치에 3개의 터치스크린이 있고 각각 2, 5, 10개의 동시 터치 접촉을 지원한다면, maxTouchPoints 값은 10이어야 합니다.

참고
maxTouchPoints 값이 0보다 크면 사용자의 장치가 터치 입력을 지원한다는 의미이지만, 사용자가 실제로 터치 입력을 반드시 사용할 것이라는 의미는 아닙니다. 저자들은 시스템에 존재할 수 있는 마우스, 펜, 화면낭독기 등 다른 입력 방식도 반드시 고려해야 합니다.
참고
maxTouchPoints는 콘텐츠의 상호작용 모델이 현재 하드웨어에서 인식될 수 있도록 보장하는 데 자주 사용됩니다. UI 편의성을 하드웨어 성능이 낮은 사용자에게 제공할 수 있습니다. 정확한 터치 포인트 개수를 알 수 없는 플랫폼에서는 보장되는 최소값이 제공됩니다. 따라서 실제 인식되는 터치 포인트 수가 maxTouchPoints 값을 초과할 수 있습니다.

9. 기본 터치 동작을 위한 후보 영역 선언

터치 입력의 경우, 모든 포인터 이벤트의 기본 동작이 뷰포트 조작(예: 팬 또는 확대/축소)이 절대 되어서는 안 됩니다.

참고
터치 조작은 의도적으로 포인터 이벤트의 기본 동작이 아닙니다. 이벤트 취소에 대한 의존성을 제거하면 사용자 에이전트의 성능 최적화가 쉬워집니다.
참고
뷰포트 조작에 사용되는 포인터 문제는 일반적으로 터치 입력에만 국한되지만(사용자의 손가락이 콘텐츠와 상호작용하면서 페이지를 팬/확대/축소할 수 있음), 일부 사용자 에이전트는 다른 포인터 타입에도 동일한(직접 또는 간접) 조작을 허용할 수 있습니다. 예를 들어, 모바일/태블릿 장치에서는 스타일러스로 팬이 가능할 수도 있습니다. 이 섹션은 이런 시나리오에도 적용됩니다(명세에서 "touch"라 표기되어도).

9.1 touch-action CSS 속성

이름: touch-action
값: auto | none | [ pan-x || pan-y ] | manipulation
초기값: auto
적용 대상: 다음 제외 모든 요소: 대체되지 않은 인라인 요소, 테이블 행, 행 그룹, 테이블 열, 열 그룹.
상속: 아니오
백분율: 해당 없음
미디어: 시각
계산된 값: 지정된 값과 동일함.

touch-action CSS 속성은 터치 입력이 사용자 에이전트가 제공하는 기본 동작을 허용할지 결정합니다. 여기에는 팬, 확대/축소 등 다양한 동작이 포함됩니다. touch-action 값 섹션을 참고하세요.

참고
앞서 언급했듯이, 다른 포인터 타입에 대해 기본 동작(팬, 확대/축소 등)을 허용하는 사용자 에이전트의 경우, 해당 포인터 타입에도 동일하게 적용되어야 합니다. 예를 들어, 스타일러스로 팬/확대/축소를 허용한다면, 어떤 기본 동작을 처리할지 결정할 때도 touch-action 값을 고려해야 합니다.

사용자 에이전트가 터치 동작을 실행하는 동안, 사용자 에이전트는 해당 포인터에 대해 추가 포인터 이벤트를 절대 발생시키면 안 됩니다. 사용자 에이전트는 반드시 아래 조건이 모두 충족될 때 이름이 pointercancel인 포인터 이벤트(그리고 이어서 pointerout 이벤트, 하나 이상의 pointerleave 이벤트)를 발생시켜, 해당 포인터의 이벤트 스트림을 종료해야 합니다:

참고
사용자 에이전트는 여러 개의 개별 동작이 모두 하나의 연속된 제스처로 처리되는 복잡한 기본 동작을 구현할 수도 있습니다. 예를 들어, 터치스크린에서 "플링 스크롤" 제스처의 경우: 사용자가 손가락을 빠르게 움직여 문서를 팬하다가 손가락을 떼면, 문서는 관성 효과로 계속 스크롤됩니다. 문서가 계속 움직이고 있을 때 사용자가 다시 손가락을 화면에 올려 추가 플링을 하거나, 현재 스크롤을 늦추거나 멈추거나 방향을 바꿀 수도 있습니다. 이 명세서는 제스처와 기본 동작 구현 방법을 규범적으로 정의하지 않으므로, 두 번째 터치가(두 번째 플링 또는 현재 스크롤 반대 동작으로 해석되기 전) 포인터 이벤트를 발생시킬지 여부는 사용자 에이전트에 맡깁니다.

9.2 지원되는 터치 동작 결정

사용자가 요소를 터치할 때, 그 터치의 효과는 touch-action 속성과 해당 요소 및 조상들의 기본 터치 동작에 따라 다음과 같이 결정됩니다:

참고
일부 사용자 에이전트는 여러 포인터의 동시 상호작용(예: 멀티터치)로 트리거되는 터치 동작을 지원합니다. 여러 포인터의 touch-action 값을 처리하거나 연관짓는 방법은 이 명세서의 범위에 포함되지 않습니다.

9.3 touch-action 값의 세부사항

auto
사용자 에이전트는 요소에서 시작된 터치에 대해 팬, 확대/축소 등 허용된 터치 동작을 임의로 결정할 수 있습니다.
none
요소 위에서 시작된 터치는 기본 터치 동작을 절대 트리거할 수 없습니다.
pan-x
pan-y

사용자 에이전트는 요소에서 시작된 터치를 지정된 모든 방향의 스크롤 목적에만 고려할 수 있습니다. 스크롤이 시작되면, 사용자가 방향을 바꿀 수 있습니다(반전된 방향의 스크롤 시작이 허용되지 않더라도). 반면, 스크롤이 한 축으로만 제한된 경우(예: pan-y), 스크롤 중 축을 바꿀 수 없습니다.

manipulation
사용자 에이전트는 요소에서 시작된 터치를 스크롤 및 연속 확대/축소 목적에만 고려할 수 있습니다. auto에서 지원되는 추가 동작은 이 명세서의 범위에 포함되지 않습니다.
참고
구현체에서 일반적으로 사용되는 추가 touch-action 값은 [COMPAT]의 정의를 참고하세요.
참고
"pan"과 "scroll"은 동의어로 간주됩니다. 팬/스크롤 동작이나 auto, none 값에 대한 동작을 트리거하는 상호작용 또는 제스처 정의는 이 명세서의 범위에 포함되지 않습니다.
참고
touch-action 속성은 CSS width 및 height 속성을 모두 지원하는 요소에만 적용됩니다([CSS21] 참조). 이 제한은 저지연 터치 동작에 대한 사용자 에이전트 최적화를 위해 설계되었습니다. 기본적으로 지원되지 않는 요소(예: <span>처럼 대체되지 않은 인라인 요소, [HTML5] 참조)는 display CSS 속성을 block 등 width, height를 지원하는 값으로 설정하면 적용할 수 있습니다. 향후 명세서에서 모든 요소로 이 API를 확장할 수 있습니다.
참고
일부 기본 터치 동작을 비활성화하면 사용자 에이전트가 다른 동작에 더 빠르게 반응할 수 있습니다. 예를 들어, auto일 때는 일반적으로 click 이벤트 전에 더블탭 제스처 처리를 위해 300ms 지연이 추가됩니다. 이런 경우 touch-action: none 또는 touch-action: manipulation을 명시적으로 설정하면 이 지연이 제거됩니다. 탭 또는 더블탭 제스처를 판별하는 방법은 이 명세서의 범위에 포함되지 않습니다.
예시 6: 모든 터치 동작 금지 
<div style="touch-action: none;">
    이 요소는 모든 터치에 대해 포인터 이벤트를 받습니다.
</div>
예시 7: 수평 팬만 허용 
<div style="touch-action: pan-x;">
    이 요소는 수평 방향으로 팬하지 않을 때 포인터 이벤트를 받습니다.
</div>
예시 8: 자식 영역에서 터치 동작 금지 
<div style="overflow: auto;">
    <div style="touch-action: none;">
        이 요소는 모든 터치에 대해 포인터 이벤트를 받습니다.
    </div>
    <div>
        이 요소에서의 터치는 부모를 조작하는 데 사용될 수 있습니다.
    </div>
</div>
예시 9: 중간 부모가 터치 동작 금지 
<div style="overflow: auto;">
    <div style="touch-action: pan-y;">
        <div style="touch-action: pan-x;">
            이 요소는 모든 터치에 대해 포인터 이벤트를 받습니다. 
            왜냐하면 수평 팬만 허용하지만 중간 조상(팬 가능 요소와의 사이)이 수직 팬만 허용하기 때문입니다.
            따라서 터치 동작이 허용되지 않습니다.
        </div>
    </div>
</div>

10. 포인터 캡처

10.1 소개

이 섹션은 비규범적입니다.

포인터 캡처를 사용하면 특정 포인터의 이벤트(모든 호환성 마우스 이벤트 포함)를 포인터 위치의 일반적인 히트 테스트 결과가 아닌, 특정 요소로 리타겟팅할 수 있습니다. 이는 커스텀 슬라이더 컨트롤(예: [HTML5] <input type="range"> 컨트롤과 유사)과 같은 시나리오에서 유용합니다. 포인터 캡처를 슬라이더 썸 요소에 설정하면, 포인터가 썸에서 벗어나더라도 사용자가 컨트롤을 앞뒤로 슬라이드할 수 있습니다.

커스텀 볼륨 슬라이더
그림 4 썸 요소를 앞뒤로 슬라이드하여 값을 선택하는 커스텀 슬라이더 컨트롤 예시. 썸에서 pointerdown 이후, 포인터 캡처를 사용하면 포인터가 썸에서 벗어나더라도 사용자가 썸을 움직일 수 있습니다.

10.2 포인터 캡처 설정

포인터 캡처는 element.setPointerCapture(pointerId) 메서드를 호출하여 요소에 설정합니다. 이 메서드가 호출되면, 사용자 에이전트는 반드시 다음 단계를 실행해야 합니다:

  1. 메서드 인자로 제공된 pointerId가 활성 포인터 중 아무것도 일치하지 않으면 NotFoundError라는 이름의 DOMException을 발생시킵니다.
  2. 이 메서드가 호출된 Element가 connected ([DOM4])가 아니라면, InvalidStateError라는 이름의 예외를 발생시킵니다.
  3. 문서에 잠긴 요소([PointerLock])가 있을 때 이 메서드가 호출되면, InvalidStateError라는 이름의 예외를 발생시킵니다.
  4. 포인터가 활성 버튼 상태가 아니면, 이 단계들을 종료합니다.
  5. 지정된 pointerId에 대해, 대기 중인 포인터 캡처 대상 오버라이드를 이 메서드가 호출된 Element로 설정합니다.

10.3 포인터 캡처 해제

포인터 캡처는 element.releasePointerCapture(pointerId) 메서드를 명시적으로 호출하여 요소에서 해제합니다. 이 메서드가 호출되면, 사용자 에이전트는 반드시 다음 단계를 실행해야 합니다:

  1. 메서드 인자로 제공된 pointerId가 활성 포인터 중 아무것도 일치하지 않고, 이 단계들이 포인터 캡처의 암시적 해제에 의해 호출된 것이 아니라면 NotFoundError라는 이름의 DOMException을 발생시킵니다.
  2. 지정된 pointerId에 대해 hasPointerCapture가 false인 Element라면, 이 단계들을 종료합니다.
  3. 지정된 pointerId에 대해 대기 중인 포인터 캡처 대상 오버라이드가 설정되어 있으면 해제합니다.

10.4 암시적 포인터 캡처

일부 입력 장치(예: 터치스크린)는 포인터가 활성화된 UI 요소에 직접 작용하도록(커서가 UI 위에 떠 있는 개념이 아니라, 물리적으로 직접 접촉하는 환상을 주도록) "직접 조작" 메타포를 구현합니다. 이런 장치는 InputDeviceCapabilities.pointerMovementScrolls property로 식별되며, 다음과 같이 "암시적 포인터 캡처" 동작을 가져야 합니다.

직접 조작 장치는 setPointerCapture가 pointerdown 리스너가 호출되기 직전에 타겟 요소에 호출된 것처럼 정확히 동작해야 합니다. hasPointerCapture API는(예: pointerdown 리스너 내부에서) 이 동작이 발생했는지 확인하는 데 사용할 수 있습니다. 다음 포인터 이벤트가 발생하기 전에 해당 포인터에 대해 releasePointerCapture가 호출되지 않으면, 타겟에 gotpointercapture 이벤트가(정상적으로) 디스패치되어 캡처가 활성화됨을 알립니다.

참고
이것은 [PointerEvents1]과의 호환성이 깨지는 변경이지만, 기존 콘텐츠 대부분에는 영향이 없습니다. 암시적 캡처 설계는 일반적인 플랫폼 UX 관습을 따름과 동시에, 사용자 에이전트가 명시적 개발자 opt-in 없이 터치 이동 이벤트에서 히트 테스트를 불필요하게 하지 않도록 성능 최적화를 가능하게 합니다(기존 주요 네이티브/웹 터치 입력 API의 성능 특성과 일치).
참고
또한, 사용자 에이전트는 특정 UI 위젯(예: input range 컨트롤)에서 모든 입력 장치에 대해 암시적 포인터 캡처 동작을 구현할 수 있습니다(상호작용 중 일부 손가락 움직임이 폼 컨트롤 영역을 벗어나는 것을 허용).

10.5 포인터 캡처의 암시적 해제

pointerup 또는 pointercancel 이벤트 발생 직후, 사용자 에이전트는 반드시 해당 pointerup 또는 pointercancel 이벤트의 pointerId에 대해 대기 중인 포인터 캡처 대상 오버라이드를 해제하고, 필요한 경우 lostpointercapture를 발생시키기 위해 대기 중인 포인터 캡처 처리 단계를 실행해야 합니다. 대기 중인 포인터 캡처 처리 단계를 실행한 후, 포인터가 호버를 지원한다면, 사용자 에이전트는 캡처가 없는 상태에서 포인터의 현재 위치를 반영하기 위한 경계 이벤트도 반드시 전송해야 합니다.

사용자 에이전트가 click 이벤트 발생을 지원하는 경우 ( 호환성 마우스 이벤트 참조 ), 암시적 해제 시 click과 lostpointercapture 이벤트가 모두 발생한다면, click을 먼저 발생시켜야 합니다.

포인터 캡처 대상 오버라이드가 더 이상 connected ([DOM4]) 상태가 아닐 때, 대기 중인 포인터 캡처 대상 오버라이드와 포인터 캡처 대상 오버라이드 노드는 해제되어야 하며, 캡처된 포인터에 대한 lostpointercapture PointerEvent도 문서에 발생해야 합니다.

요소에 포인터 락([PointerLock])이 성공적으로 적용된 경우, 사용자 에이전트는 어떤 요소가 캡처되었거나 캡처가 대기 중인 경우에도 releasePointerCapture() 메서드가 호출된 것처럼 단계를 반드시 실행해야 합니다.

11. 마우스 이벤트와의 호환성 매핑

현재 존재하는 대부분의 웹 콘텐츠는 오직 마우스 이벤트만을 대상으로 작성되어 있습니다. 아래는 사용자 에이전트가 기존 콘텐츠와의 호환성을 위해 일반 포인터 입력을 마우스 이벤트로 매핑할 수 있는 알고리즘을 설명합니다.

마우스 이벤트와의 호환성 매핑은 이 명세서의 선택적 기능입니다. 기존 레거시 콘텐츠와의 최적 호환성을 위해 사용자 에이전트가 이 기능을 지원하는 것이 바람직합니다. 호환성 마우스 이벤트를 지원하지 않더라도 click 및 contextmenu 이벤트는 여전히 지원하는 것이 바람직합니다(아래 참고 참조).

참고

[UIEVENTS]에서 정의된 click 이벤트와 [HTML5]에서 정의된 contextmenu 이벤트는 호환성 마우스 이벤트로 간주되지 않습니다. 이들은 일반적으로 UI 활성화와 연결되어 있으며 키보드와 같은 다른 입력장치에서도 발생할 수 있습니다.

click 및 contextmenu를 발생시키는 사용자 에이전트에서는, 포인터 이벤트 중 preventDefault를 호출해도 click 및 contextmenu 발생에는 일반적으로 영향을 주지 않습니다. 이들은 호환성 마우스 이벤트가 아니기 때문에, 사용자 에이전트는 모든 포인팅 장치(주 포인터가 아닌 경우도 포함)에 대해 click 및 contextmenu를 발생시킵니다.

이러한 고수준 이벤트(click, contextmenu, focus, blur 등)와 포인터 이벤트의 상대적 순서는 정의되어 있지 않으며 사용자 에이전트마다 다릅니다. 예를 들어, 일부 에이전트에서는 contextmenu가 pointerup 이후에 자주 발생하지만, 다른 곳에서는 pointerup 또는 pointercancel 전에 발생하거나, 키보드 단축키 등 포인터 이벤트와 무관하게 발생할 수도 있습니다.

별도의 언급이 없는 한, 매핑된 마우스 이벤트의 타겟은 해당 포인터 이벤트의 타겟과 동일해야 합니다. 단, 타겟이 더 이상 자신의 ownerDocument 트리에 참여하지 않는 경우, 마우스 이벤트는 원래 타겟이 트리에서 제거될 당시 여전히 트리에 남아있는 가장 가까운 상위 노드에서 발생해야 하며, 마우스 이벤트를 위한 새로운 이벤트 경로가 해당 타겟 노드를 기반으로 구축됩니다.

저자는 pointerdown 이벤트를 취소함으로써 특정 호환성 마우스 이벤트 발생을 방지할 수 있습니다.

참고
마우스 이벤트는 포인터가 눌린 상태일 때만 방지할 수 있습니다. 호버 중인 포인터(예: 버튼 없이 이동 중인 마우스)는 마우스 이벤트를 방지할 수 없습니다. 또한 mouseover, mouseout, mouseenter, mouseleave 이벤트는 포인터가 눌린 상태여도 방지되지 않습니다.

11.1 레거시 마우스 포인터의 효과적인 위치 추적

오직 주 포인터만 호환성 마우스 이벤트를 생성할 수 있지만, 여러 주 포인터가 동시에 활성화되어 각각 호환성 마우스 이벤트를 생성할 수 있습니다. 모든 호환성 이벤트가 MouseEvent 코드에는 단일 마우스 장치에서 발생한 것처럼 보이므로, 사용자 에이전트는 단일 장치 관점에서 일관되게 호환성 마우스 이벤트를 발생시킬 것을 권장합니다. 마우스 전환 이벤트(mouseover, mouseout, mouseenter, mouseleave)의 경우, 각 이벤트 타겟에 대한 진입/탈출 상태가 [UIEVENTS]에 의해 암시된 대로 유효해야 합니다. 사용자 에이전트는 문서 내에서 레거시 마우스 포인터의 효과적인 위치를 다음과 같이 유지함으로써 이를 보장해야 합니다.

pointerdown, pointerup, pointermove 이벤트 또는 window에서의 pointerleave 이벤트를 발생시키기 직전에, 사용자 에이전트는 다음 단계를 실행해야 합니다:

  1. 발생시킬 pointerdown, pointerup, pointermove 이벤트의 타겟을 T로 설정합니다. pointerleave 이벤트의 경우 T를 해제합니다.
  2. T와 현재 레거시 마우스 포인터의 효과적인 위치가 모두 해제되어 있거나 서로 동일하다면, 이 단계들을 종료합니다.
  3. 현재 레거시 마우스 포인터의 효과적인 위치에서 T로 마우스가 이동하는 것으로 보고 [UIEVENTS]에 따라 mouseover, mouseout, mouseenter, mouseleave 이벤트를 디스패치합니다. 현재 위치나 T가 해제된 경우는 마우스가 윈도우 밖에 있다고 간주합니다.
  4. 레거시 마우스 포인터의 효과적인 위치를 T로 설정합니다.

11.2 호버를 지원하는 장치의 매핑

사용자 에이전트가 호버를 지원하는 장치에 대해 포인터 이벤트를 디스패치할 때는 다음 단계를 실행해야 합니다:

  1. 디스패치할 포인터 이벤트의 isPrimary 속성이 false이면, 포인터 이벤트를 디스패치하고 나머지 단계를 종료합니다.
  2. 디스패치할 포인터 이벤트가 pointerdown, pointerup, pointermove 또는 window에서의 pointerleave 이벤트라면, 레거시 마우스 포인터의 효과적인 위치 추적에 따라 호환성 마우스 전환 이벤트를 디스패치합니다.
  3. 포인터 이벤트를 디스패치합니다.
  4. 디스패치된 포인터 이벤트가 pointerdown이고 이벤트가 취소된 이벤트라면, 해당 pointerType에 PREVENT MOUSE EVENT 플래그를 설정합니다.
  5. PREVENT MOUSE EVENT 플래그가 이 pointerType에 설정되어 있지 않고, 디스패치된 포인터 이벤트가 다음 중 하나라면:
    • pointerdown: mousedown 이벤트를 발생시킴.
    • pointermove: mousemove 이벤트를 발생시킴.
    • pointerup: mouseup 이벤트를 발생시킴.
    • pointercancel: window에서 mouseup 이벤트를 발생시킴.
  6. 디스패치된 포인터 이벤트가 pointerup 또는 pointercancel이면, 해당 pointerType의 PREVENT MOUSE EVENT 플래그를 해제합니다.

11.3 호버를 지원하지 않는 장치의 매핑

대부분의 터치스크린과 같은 일부 장치는 활성화 상태가 아닐 때 좌표(또는 좌표 집합)를 호버할 수 없습니다. 마우스 이벤트를 대상으로 작성된 기존 콘텐츠는 일반적으로 마우스가 이벤트를 생성한다고 가정하므로 다음과 같은 특징이 있습니다:

참고
마우스용으로 설계된 콘텐츠에서 호버는 UI 요소의 표시/숨김에 사용되는 경우가 많습니다(예: "호버 메뉴"). 이런 콘텐츠는 호버를 지원하지 않는 장치와 호환되지 않는 경우가 많습니다. 이 명세서는 이 시나리오에 대한 매핑이나 동작을 정의하지 않습니다. 향후 명세서에서 고려될 예정입니다.

이런 입력 장치에 대해 사용자 에이전트는 다른 매핑을 제공해야 합니다. 사용자 에이전트가 호버를 지원하지 않는 장치에 대해 포인터 이벤트를 디스패치할 때는 다음 단계를 실행해야 합니다:

  1. 디스패치할 포인터 이벤트의 isPrimary 속성이 false이면, 포인터 이벤트를 디스패치하고 나머지 단계를 종료합니다.
  2. 디스패치할 포인터 이벤트가 pointerover이고 해당 포인터에 대해 pointerdown 이벤트가 아직 디스패치되지 않았다면, 레거시 마우스 코드와의 호환을 위해 mousemove 이벤트를 발생시킵니다.
  3. 디스패치할 포인터 이벤트가 pointerdown, pointerup, pointermove 또는 window에서의 pointerleave 이벤트라면, 레거시 마우스 포인터의 효과적인 위치 추적에 따라 호환성 마우스 전환 이벤트를 디스패치합니다.
  4. 포인터 이벤트를 디스패치합니다.
  5. 디스패치된 포인터 이벤트가 pointerdown이고 이벤트가 취소된 이벤트라면, 해당 pointerType에 PREVENT MOUSE EVENT 플래그를 설정합니다.
  6. PREVENT MOUSE EVENT 플래그가 이 pointerType에 설정되어 있지 않고, 디스패치된 포인터 이벤트가 다음 중 하나라면:
    • pointerdown: mousedown 이벤트를 발생시킴.
    • pointermove: mousemove 이벤트를 발생시킴.
    • pointerup: mouseup 이벤트를 발생시킴.
    • pointercancel: window에서 mouseup 이벤트를 발생시킴.
  7. 디스패치된 포인터 이벤트가 pointerup 또는 pointercancel이면, 해당 pointerType의 PREVENT MOUSE EVENT 플래그를 해제합니다.
참고

사용자 에이전트가 [TOUCH-EVENTS]에 정의된 터치 이벤트와 포인터 이벤트를 모두 지원하는 경우, 이 섹션에서 설명한 호환성 마우스 이벤트를 생성하지 않아야 합니다. 이는 마우스 이벤트가 [TOUCH-EVENTS]의 모델에 따라 생성될 것으로 기대하는 사이트에서 호환성 문제를 야기할 수 있기 때문입니다.

참고

호버를 지원하지 않는 주 포인터(예: 터치스크린의 단일 손가락)로 요소를 활성화(click 발생)하면 일반적으로 아래와 같은 이벤트 시퀀스가 발생합니다:

  1. mousemove
  2. pointerover
  3. pointerenter
  4. mouseover
  5. mouseenter
  6. pointerdown
  7. mousedown
  8. 포인터 이동에 따라 0회 이상의 pointermove 및 mousemove 이벤트
  9. pointerup
  10. mouseup
  11. click
  12. pointerout
  13. pointerleave
  14. mouseout
  15. mouseleave

그러나 이 상호작용 중 pointerdown 이벤트가 취소되면 이벤트 시퀀스는 다음과 같습니다:

  1. mousemove
  2. pointerover
  3. pointerenter
  4. mouseover
  5. mouseenter
  6. pointerdown
  7. 포인터 이동에 따라 0회 이상의 pointermove 이벤트
  8. pointerup
  9. click
  10. pointerout
  11. pointerleave
  12. mouseout
  13. mouseleave

12. 보안 및 개인정보 보호 고려사항

이 부록에서는 Pointer Events 구현과 관련된 보안 및 개인정보 보호 고려사항을 다룹니다. 논의는 이 명세서에 정의된 이벤트 모델, API, 이벤트의 구현에서 직접 발생하는 보안 및 개인 정보 문제로 한정됩니다.

이 명세서에서 정의된 많은 이벤트 타입은 사용자 동작에 응답하여 디스패치됩니다. 덕분에 악의적인 이벤트 리스너가 사용자가 일반적으로 기밀로 여기는 정보, 예를 들어 사용자가 페이지와 상호작용할 때의 마우스/스타일러스/손가락의 정확한 경로/이동 정보를 획득할 수 있습니다.

포인터 이벤트에는(사용자의 장치가 지원하는 경우) 펜 입력의 각도나 기울기, 접촉 면의 기하, 스타일러스 또는 터치 스크린에 가해진 압력 등 추가 정보가 포함될 수 있습니다. 각도, 기울기, 기하, 압력 정보는 사용자의 장치 센서와 직접적으로 연관되므로, 이 명세서는 오리진이 이러한 센서에 접근할 수 있도록 허용합니다.

이 센서 데이터와 입력 메커니즘 유형(마우스, 터치, 펜) 판별 기능은 사용자의 특성이나 사용자의 장치 및 환경의 특성을 유추하는 데 사용될 수 있습니다. 이러한 추론된 특성과 장치/환경 정보 자체도 민감한 정보일 수 있습니다. 예를 들어 악의적인 사이트는 사용자가 보조 기술을 사용하는지 추가로 추론할 수 있습니다. 이 정보는 또한 사용자 프로필 구축, 특정 사용자를 "지문" 찍어서 추적하려는 목적으로도 사용될 수 있습니다.

완화책으로, 사용자 에이전트는 사용자가 각도, 기울기, 압력 등 특정 센서 데이터 접근을 비활성화하거나, 명시적 동의(opt-in) 후에만 제공할 수 있도록 하는 기능을 포함하는 것을 고려할 수 있습니다.

이 외의 사항에 대해, 워킹 그룹은 이 명세서가 다음과 같다고 판단합니다:

A. 감사의 글

이 문서에 일부 반영된 다양한 제안과 의견을 제공해준 많은 분들께 감사드립니다. 그룹 의장은 아래 과거 및 현재 그룹 멤버와 참가자들의 기여에 감사를 표합니다: Mustaq Ahmed, Arthur Barstow, Matt Brubeck, Rick Byers, Cathy Chan, Ted Dinklocker, Dave Fleck, Ella Ge, Scott González, Philippe Le Hégaret, Hayato Ito, Patrick Kettner, Patrick H. Lauke, Scott Low, Sangwhan Moon, Olli Pettay, Jacob Rossi, Doug Schepers, Ming-Chou Shih, Brenton Simpson, Dave Tapuska, Asir Vedamuthu, Lan Wei, Navid Zolghadr

특히 이 모델의 초판을 개척한 분들께 특별히 감사드립니다. 대표적으로: Charu Chandiram, Peter Freiling, Nathan Furtwangler, Thomas Olsen, Matt Rakow, Ramu Ramanathan, Justin Rogers, Jacob Rossi, Reed Townsend, Steve Wright.

B. 개정 이력

이 섹션은 비규범적입니다.

아래는 이 명세서의 첫 [PointerEvents1] 명세와 비교하여 현행 표준의 주요 편집적 변경 사항을 요약한 안내문입니다. 이 명세서 Editor's Draft의 전체 개정 이력도 참고하세요.

C. 참고문헌

C.1 규범적 참고문헌

[CSS21]
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) 명세. Bert Bos; Tantek Çelik; Ian Hickson; Håkon Wium Lie 등. W3C. 2011년 6월 7일. W3C 권고안. URL: https://www.w3.org/TR/CSS2/
[DOM4]
DOM 현행 표준. Anne van Kesteren. WHATWG. 현행 표준. URL: https://dom.spec.whatwg.org/
[HTML]
HTML 현행 표준. Anne van Kesteren; Domenic Denicola; Ian Hickson; Philip Jägenstedt; Simon Pieters. WHATWG. 현행 표준. URL: https://html.spec.whatwg.org/multipage/
[HTML5]
HTML5. Steve Faulkner; Arron Eicholz; Travis Leithead; Alex Danilo; Sangwhan Moon. W3C. 2017년 12월 14일. W3C 권고안. URL: https://www.w3.org/TR/html5/
[PointerLock]
Pointer Lock. Vincent Scheib. W3C. 2016년 10월 27일. W3C 권고안. URL: https://www.w3.org/TR/pointerlock/
[RFC2119]
RFC에서 요구사항 수준을 나타내는 주요 키워드. S. Bradner. IETF. 1997년 3월. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119
[UIEVENTS]
UI 이벤트. Gary Kacmarcik; Travis Leithead; Doug Schepers. W3C. 2018년 11월 8일. W3C 작업 초안. URL: https://www.w3.org/TR/uievents/
[WEBIDL]
Web IDL. Cameron McCormack; Boris Zbarsky; Tobie Langel. W3C. 2016년 12월 15일. W3C Editor's Draft. URL: https://heycam.github.io/webidl/

C.2 비규범적 참고문헌

[COMPAT]
호환성 현행 표준. Mike Taylor. WHATWG. 현행 표준. URL: https://compat.spec.whatwg.org/
[CSSOM-VIEW]
CSSOM View 모듈. Simon Pieters. W3C. 2016년 3월 17일. W3C 작업 초안. URL: https://www.w3.org/TR/cssom-view-1/
[PointerEvents1]
Pointer Events. Jacob Rossi; Matt Brubeck. W3C. 2015년 2월 24일. W3C 권고안. URL: https://www.w3.org/TR/pointerevents1/
[TOUCH-EVENTS]
Touch Events. Doug Schepers; Sangwhan Moon; Matt Brubeck; Arthur Barstow. W3C. 2013년 10월 10일. W3C 권고안. URL: https://www.w3.org/TR/touch-events/