이 문서는 Pointer Events(W3C Recommendation 24 February 2015)의 한국어 번역본입니다.
이 문서에 오역 및 오타를 포함할 수 있습니다. 가능하면 원문도 확인하시길 바랍니다.
이 문서의 발행 이후 보고된 에러와 이슈는 errata에서 확인 가능합니다.
번역본도 제공합니다.
Copyright © 2015 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.
이 문서는 마우스, 펜, 터치스크린 등을 포함한 하드웨어에 상관없이 포인터 입력을 핸들링하기 위한 이벤트와 관련 인터페이스를 정의합니다. 이미 존재하는 마우스 기반 콘텐츠와 호환성을 유지하기 위해, 이 스펙문서는 다른 포인터 디바이스를 위한 마우스 이벤트 실행[DOM-LEVEL-3-EVENTS]도 소개하고 있습니다.
이 섹션은 문서를 발행하였을 때 상태를 설명합니다. 다른 문서가 이 문서를 대체할 수도 있습니다. 이 문서 및 W3C에서 공개한 다른 문서의 최신 버전은 W3C technical reports index at http://www.w3.org/TR/에서 확인 가능합니다.
이 문서를 권고안으로 발행함으로써 W3C는 포인터 이벤트 권고안이 권고안 프로세스로 인해 DOM 레벨 3 이벤트 스펙 문서나 DOM4 스펙 문서가 변경하더라도 영향을 받지 않을 거라 기대합니다.
포인터 이벤트 워킹 그룹은 포인터 이벤트 test suite 및 구현 보고서로 구현성과 상호 운용성을 입증합니다.
이 문서는 W3C 멤버, 소프트웨어 개발자, 다른 W3C 그룹과 관심 단체가 리뷰하였으며 디렉터의 승인을 받아 W3C 권고안으로 등록하였습니다. 이 문서는 안정적인 문서로 다른 문서에서 참고 자료로 사용하거나 인용할 수 있습니다. 스펙 문서를 권고안으로 제정하여 W3C가 하는 역할은 스펙 문서에 관심을 모으고 다방면으로 퍼뜨리는 일입니다. 이를 통해 웹의 기능과 상호 운용성 향상을 기대할 수 있습니다.
이 문서는 2004년 2월 6일 W3C 특허 정책을 따르는 그룹에서 작성하였습니다. W3C는 그룹의 성과물에 관련하여 모든 공개 특허 공개 리스트를 관리합니다. 여기에는 특허 공개에 대한 지시사항도 포함합니다. 특허에 대해서 충분한 지식이 있는 사람이, 스펙 문서의 Essential Claim(s)에 인정된다고 파악되는 경우, W3C 특허 정책 제 6장에 의거하여 정보를 공개해야 할 필요가 있습니다.
이 문서는 2005년 10월 14일 W3C 프로세스 문서를 통해 관리하고 있습니다.
이 섹션은 표준에 준하는 내용이 아닙니다.
오늘날 많은 [HTML5] 콘텐츠는 마우스 입력으로 사용하며, 마우스 입력을 위해 디자인하기도 합니다. 여기에 사용자 정의 방법으로 입력을 제어하기 위해서 보통 [DOM-LEVEL-3-EVENTS] 마우스 이벤트를 사용합니다. 새로운 컴퓨팅 디바이스가 많아졌으나, 터치스크린, 펜 입력 등을 포함한 다른 형태의 입력이 통합되지 않았습니다. 이벤트 타입은 각각의 입력 형태에 독립적인 처리 방법을 가지도록 제안되었습니다. 그러나, 이 방법은 새로운 입력 타입을 지원해야 할 때 이벤트 처리에 대한 간접 비용 및 불필요한 중복을 일으킵니다. 한 디바이스 타입만 생각하고 콘텐츠를 작성한 경우 호환성 문제를 일으킬 가능성도 있습니다. 거기에 더해, 이미 존재하는 마우스 베이스 콘텐츠와 호환하기 위해, 대부분의 유저 에이전트가 모든 입력 타입에 마우스 이벤트를 발생시켰습니다. 이는 실제로 마우스 디바이스에서 발생한 이벤트인지, 다른 디바이스에서 입력한 내용을 호환성을 위해 마우스 이벤트로 변경하여 생성한 것인지 판단을 모호하게 만듭니다.
여러개의 입력 타입으로 인한 코딩 코스트를 없애면서 위에서 설명한 마우스 이벤트의 모호성에 도움을 주기 위해, 이 스펙 문서는 포인터라 부르는 더 추상적인 입력 형태를 정의합니다. 포인터는 마우스 커서, 펜, (멀티 터치를 포함한) 터치 및 다른 포인팅 입력 디바이스가 생성한 스크린과 맞닿는 모든 포인트에 사용이 가능합니다. 이 모델은 유저가 어떤 하드웨어를 사용하는 지와 상관 없이 사이트와 어플리케이션을 잘 동작하도록 쉽게 작성할 수 있게 합니다. 장치 고유의 처리를 요구하는 시나리오를 위해, 이 스펙문서에서는 이벤트가 발생하는 디바이스 타입을 검사하기 위한 속성을 정의합니다. 주 목적은 단지 경험 증가를 위해 필요한 디바이스별 고유 처리를 여전히 허용하면서 디바이스에 구애받지 않는 입력을 쉽게 작성할 수 있게 하는 이벤트와 인터페이스의 단일 세트를 제공하는 것입니다.
추가적인 주된 목표는 스크립트 실행을 막지않고, 스크롤 같은 기본 터치 액션을 처리하기 위한 멀티 스레드 유저 에이전트를 가능하게 하는 것입니다.
이 스펙 문서가 다양한 포인터 입력을 위한 통합 이벤트 모델을 정의하나, 키보드나 키보드 형태의 인터페이스 같은 다른 입력 형태를 이 모델에서 다루지 않습니다 (예를 들면, 유저가 포커스를 가져갈 수 있는 컨트롤이나 요소들을 통한 유저 순차적 네비게이션을 허용하는 스크린 리더나 터치스크린 디바이스에서만 동작하는 보조 도구같은 것들입니다). 유저 에이전트는 이러한 인터페이스를 지원하기 위해 포인터 이벤트를 생성할 수 있지만, 이 시나리오를 이 스펙 문서에서 다루지 않습니다.
첫번째 인스턴스에서, 작성자가 focus
, blue
, click
같은
하이 레벨 이벤트에 대응하는 모든 입력 형태를 위해 동일한 기능을 제공하기를 권장합니다.
그러나, (포인터 이벤트 같은) 로우 레벨 이벤트를 사용할 때, 작성자는 모든 입력 형태를 반드시 지원하는 것을 권장합니다.
키보드와 키보드 형태의 인터페이스같은 경우, 명백히 키보드 이벤트 처리를 추가해야 합니다.
추가적인 내용은 WCAG 2.0 Guideline 2.1를 참고하시길 바랍니다.
포괄적인 포인터 입력을 위한 이벤트는 pointerdown, pointermove, pointerup, pointerover, pointerout 등 마우스에서 사용하던 것과 유사한 게 많습니다. 이는 마우스 이벤트에서 포인터 이벤트로 콘텐츠를 이동을 쉽고 용이하게 합니다. 포인터 이벤트는 클라이언트 좌표, 타겟 요소, 버튼 상태 등 현재 마우스 이벤트에서 사용하는 속성을 제공합니다. 여기에 더해 압력, 접촉 기하, 기울기 등 다른 입력 형태를 위한 새로운 속성도 제공합니다. 따라서 다른 형태의 인풋 타입 사이에 로직을 공유할 때 의미가 통하게, 최적의 경험을 얻을 수 있게 필요한 특정 입력 형태만을 위한 커스터마이징 등을 포인터 이벤트에서 쉽게 작성할 수 있게 합니다.
포인터 디바이스가 여러 입력 디바이스를 소스로 할 때, 다른 디바이스 고유 이벤트 세트에서 생성하는 건 정의하지 않습니다. 가능성과 호환을 부추기기 위해, 이 스펙에서 마우스 이벤트, 터치 이벤트 같은 다른 디바이스 고유 이벤트를 지원하기를 필수로 하지 않습니다. 유저 에이전트는 다른 디바이스 이벤트를 지원하지 않고 포인터 이벤트만 지원할 수 있습니다. 마우스 고유 이벤트로 작성한 콘텐츠의 호환성을 위해, 이 스펙 문서는 마우스 대신 다른 디바이스의 포인터 입력을 기반으로 한 호환 마우스 이벤트 생성 방법을 설명하는 섹션을 제공합니다.
이 스펙문서 내에서 예제, 노트, 작성 가이드라인, 다이어그램 및 명시적으로 '이 섹션은 표준에 준하는 내용이 아닙니다'라 표기된 내용은 표준에 준하는 내용이 아닙니다. 그 외는 모두 표준에 준하는 내용입니다.
MAY, MUST, MUST NOT, OPTIONAL, SHOULD 키워드는 [RFC2119]에서 기술하는대로 해석합니다.
이 섹션은 표준에 준하는 내용이 아닙니다.
아래 예제들은 이 스펙 문서에서 사용해야 하는 API를 어떻게 사용해야 하는지 입증하는 코드입니다.
<style> /* Disable intrinsic user agent touch behaviors (such as panning or zooming) so that all events on the canvas element are given to the application instead. */ canvas { touch-action: none; } </style> <canvas id="drawSurface" width="500px" height="500px" style="border:1px solid black;"></canvas> <script type='text/javascript'> var canvas = document.getElementById("drawSurface"), context = canvas.getContext("2d"); if (window.PointerEvent) { canvas.addEventListener("pointermove", paint, false); if(window.navigator.maxTouchPoints>1) /* User agent and hardware support multi-touch */ } else { //Provide fallback for user agents that do not support Pointer Events canvas.addEventListener("mousemove", paint, false); } function paint(event) { if(event.buttons>0) context.fillRect(event.clientX, event.clientY, 5, 5); } </script>
window.addEventListener("pointerdown", detectInputType, false); function detectInputType(event) { switch(event.pointerType) { case "mouse": /* mouse input detected */ break; case "pen": /* pen/stylus input detected */ break; case "touch": /* touch input detected */ break; default: /* pointerType is empty (could not be detected) or UA-specific custom type */ } }
<div style="position:absolute; top:0px; left:0px; width:100px;height:100px;"></div> <script> window.addEventListener("pointerdown", checkPointerSize, false); function checkPointerSize(event) { event.target.style.width = event.width + "px"; event.target.style.height = event.height + "px"; } </script>
var event = new PointerEvent("pointerover", {bubbles: true, cancelable: true, pointerId: 42, pointerType: "pen", clientX: 300, clientY: 500 }); eventTarget.dispatchEvent(event);
이 섹션은 표준에 준하는 내용이 아닙니다.
buttons
속성 값이 0이 아닌 상태를 나타냅니다.
마우스에서 적어도 한개 이상의 버튼을 눌렀을 때를 나타냅니다.
터치에서 디지타이저에 물리적으로 접촉했을 때를 나타냅니다.
펜에서 디지타이저에 펜이 물리적으로 접촉했을 때를 나타냅니다.
pointerId
로 식별하는) 문서를 포함한 추가 이벤트를 부여할 수 있으며,
포인터는 활성 상태를 유지할 것입니다. 예를 들면:
preventDefault()
으로 막았거나, 이벤트 핸들러에 false
를 반환하거나,
[DOM-LEVEL-3-EVENTS]와 [HTML5]에서 정의하는 다른 이벤트를 나타냅니다.PointerEvent
인터페이스dictionary PointerEventInit : MouseEventInit {
long pointerId = 0;
double width = 0;
double height = 0;
float pressure = 0;
long tiltX = 0;
long tiltY = 0;
DOMString pointerType = "";
boolean isPrimary = false;
};
[Constructor(DOMString type, optional PointerEventInit eventInitDict)]
interface PointerEvent : MouseEvent {
readonly attribute long pointerId;
readonly attribute double width;
readonly attribute double height;
readonly attribute float pressure;
readonly attribute long tiltX;
readonly attribute long tiltY;
readonly attribute DOMString pointerType;
readonly attribute boolean isPrimary;
};
pointerId
long 타입, 읽기 전용이벤트를 일으키는 포인터를 위한 고유 식별자. 이 식별자는 반드시
서로 다른 활성 포인터에서 고유값을 가져야합니다. [MUST]
필요한 경우 유저에이전트는 이전 활성 포인터에서 사용했지만 지금은 사용하지 않는 pointerId
값을 재활용 할 수도 있습니다. [MAY]
pointerId
선택 알고리즘은 구현체 고유의 알고리즘입니다.
따라서 작성자는 값이 다른 모든 활성 포인터에 대한 식별자 외 특정 의미를 전달할 수 없습니다.
예를 들어, 값이 단조롭게 증가하는 걸 보장하지 않습니다.width
double 타입, 읽기 전용height
double 타입, 읽기 전용pressure
float 타입, 읽기 전용tiltX
long 타입, 읽기 전용
Y-Z 평면 사이 (각도 상, [-90,90] 범위 내) 평면각과 (스타일러스 펜 같은) 변환기 축과 Y 축을 둘 다 포함하는 평면.
양수 tiltX
는 오른쪽. tiltX
는 tiltY
와 함께 디지타이저에서 변환기의 표준에서 멀리 기울어진 걸 나타낼 수 있습니다.
만약 디바이스가 tilt를 보고하지 않을 경우, 값은 반드시 0입니다. [MUST]
tiltY
long 타입, 읽기 전용tiltY
는 유저 쪽에 있습니다. tiltY
는 tiltX
와 함께 디지타이저에서 변환기의 표준에서 멀리 기울어진 걸 나타낼 수 있습니다.
만약 디바이스가 tilt를 보고하지 않을 경우, 값은 반드시 0입니다. [MUST]
pointerType
DOMString 타입, 읽기 전용
이벤트가 발생하는 디바이스 형태를 감지합니다 (마우스, 펜, 터치 등).
만약 유저에이전트가 마우스, 스타일러스 펜, 터치 입력 디바이스나 다른 디바이스로 포인터 이벤트를 발생시킨 경우,
pointerType
은 반드시 아래 표를 따릅니다. [MUST]
Pointer Device Type | pointerType Value |
---|---|
Mouse | mouse |
Pen Stylus | pen |
Touch Contact | touch |
만약 유저 에이전트에서 디바이스 형태를 감지하지 못한다면, 값은 반드시 빈 문자열이어야 합니다. [MUST]
만약 유저 에이전트가 위 목록에 존재하는 게 아닌 다른 포인터 디바이스 타입을 지원한다면, 그 pointerType
값은,
다른 디바이스 타입 이름과 충돌을 피하기 위해 벤더 프리픽스를 붙여야 합니다. [SHOULD]
pointerType
을 사용할 수 있는지에 대한 기본 데모는 예제 2를 보시길 바랍니다.
개발자들은 구현체가 커스텀 pointerType
값을 가지거나 pointerType
에 빈 문자열을 넣을 가능성이 있는 유저 에이전트를 커버하기 위한 기본 처리를 포함하는 게 좋습니다.
isPrimary
boolean 타입, 읽기 전용PointerEventInit
멤버 사전pointerId
long 타입, 기본값 0
PointerEvent
객체의 pointerId
속성을 초기화합니다.width
double 타입, 기본값 0
PointerEvent
객체의 width
속성을 초기화합니다.height
타입 double, 기본값 0
PointerEvent
객체의 height
속성을 초기화합니다.pressure
float 타입, 기본값 0
PointerEvent
객체의 pressure
속성을 초기화합니다.tiltX
타입 long, 기본값 0
PointerEvent
객체의 tiltX
속성을 초기화합니다.tiltY
타입 long, 기본값 0
PointerEvent
객체의 tiltY
속성을 초기화합니다.pointerType
타입 DOMString, 기본값 ""
PointerEvent
객체의 pointerType
속성을 초기화합니다.isPrimary
타입 boolean, 기본값 false
PointerEvent
객체의 isPrimary
속성을 초기화합니다.PointerEventInit
사전은 신뢰할 수 없는 (인위적인) 포인터 이벤트를 구축하는 메커니즘을 제공하기 위한 PointerEvent
인터페이스의 컨스트럭터로 사용합니다.
[DOM-LEVEL-3-EVENTS]에서 정의한 MouseEventInit
사전을 상속합니다.
이벤트 구축 단계는 [DOM4]에서 정의합니다.
신뢰할 수 없는 포인터 이벤트가 어떻게 발생하는 지에 대한 기본 데모 샘플 코드는 예제를 보시길 바랍니다.
(멀티 터치 같은) 멀티 포인터 시나리오에서,
isPrimary
속성은
각 포인터 타입의 활성 포인터 세트 중 마스터 포인터를 식별할 때 사용합니다.
기본 포인터만이 호환 마우스 이벤트를 만듭니다.
싱글 포인터 동작을 원하는 작성자는 기본이 아닌 포인터를 거부하여 이룰 수 있습니다.
(그러나, 여러개의 기본 포인터는 아래 주의를 보세요)
pointerdown
이벤트를
존재하는 터치 입력을 나타내는 다른 활성화 포인터가 존재하지 않을 때 보냈다면
기본 터치 입력으로 고려해야 합니다.
pointerdown
이벤트를
존재하는 펜 입력을 나타내는 다른 활성화 포인터가 존재하지 않을 때 보냈다면
기본 펜 입력으로 고려해야 합니다.
pointerType
중 하나)를 기본으로 고려해야 합니다.
예를 들어, 터치 접촉과 마우스 커서가 움직이고 있는 상황을 시뮬레이팅하면,
양쪽 모두를 기본으로 고려한 포인터를 만들 것입니다.
isPrimary
값을 false
로 발생시킬 수 있습니다.
PointerEvent
인터페이스를 사용한 이벤트 발생PointerEvent
인터페이스에서 정의하는 세트와 동일한 속성을 가진
PointerEvent
인터페이스와 함께 사용한 것을 의미합니다.
아래 이벤트에서 bubbles
속성값은 true
로 초기화합니다 :
pointerdown
pointerup
pointercancel
pointermove
pointerover
pointerout
gotpointercapture
lostpointercapture
아래 이벤트에서 cancelable
속성값은 true
로 초기화합니다 :
pointerdown
pointerup
pointermove
pointerover
pointerout
이벤트가 발생한 타겟 객체는 아래와 순서대로 결정합니다.
relatedTarget
속성을 null
로 지정합니다..
유저에이전트에서 gotpointercapture
나 lostpointercapture
가 아닌 포인터 이벤트가 발생했을 때, 반드시 아래 스텝대로 먼저 동작해야합니다:
lostpointercapture
이벤트는 pointer capture target override 노드에서 발생합니다.
gotpointercapture
이벤트는 pending pointer capture target override 노드에서 발생합니다.
pointerover
와 pointerenter
이벤트를 받는 경우, pointerout
이벤트와 pointerleave
이벤트가 히스 테스트 노드에서 발생합니다.이 섹션은 표준에 준하는 내용이 아닙니다.
아래 표는 이 스펙문서에서 정의하는 이벤트 타입의 요약을 제공합니다.
이벤트 타입 | Sync/Async | Bubbles | Cancelable | 기본 동작 |
---|---|---|---|---|
pointerover |
Sync | Yes | Yes | 다름: 포인터가 기본일 때, mouseover 의 모든 기본 동작 |
pointerenter |
Sync | No | No | 다름: 포인터가 기본일 때, mouseenter 의 모든 기본 동작 |
pointerdown |
Sync | Yes | Yes | 다름: 포인터가 기본일 때, mousedown 이벤트의 모든 기본 동작
이 pointerType 에서 PREVENT MOUSE EVENT 플래그가 세트되어 있으면 이 이벤트는 취소되며,
특정 호환 마우스 이벤트
발생 서브시퀀스를 막습니다.
|
pointermove |
Sync | Yes | Yes | 다름: 포인터가 기본일 때, mousemove 의 모든 기본 동작 |
pointerup |
Sync | Yes | Yes | 다름: 포인터가 기본일 때, mouseup 의 모든 기본 동작 |
pointercancel |
Sync | Yes | No | 없음 |
pointerout |
Sync | Yes | Yes | 다름: 포인터가 기본일 때, mouseout 의 모든 기본 동작 |
pointerleave |
Sync | No | No | 다름: 포인터가 기본일 때, mouseleave 의 모든 기본 동작 |
gotpointercapture |
Sync/Async | Yes | No | 없음 |
lostpointercapture |
Sync/Async | Yes | No | 없음 |
primary pointer이 발생할 시 (gotpointercapture
와 lostpointercapture
를 제외하고),
그 이벤트 또한 호환 마우스 이벤트로 발생합니다.
pointerover
이벤트pointerover
포인터 이벤트를 발생시켜야 합니다. [MUST] 유저에이전트는 hover를 지원하지 않는 디바이스에서 반드시 pointerdown
이벤트를 이 이벤트 대신 발생시켜야 합니다. (pointerdown
참고) [MUST]pointerenter
이벤트pointerdown
결과값을 포함한 포인팅 디바이스가 요소나 그 자손의 히트 테스트 범위 내에서 움직일 경우 pointerenter
포인터 이벤트를 발생시켜야 합니다. (pointerdown
참고) [MUST] 이 이벤트 타입은 pointerover
와 비슷하나, 버블이 발생하지 않는 차이가 있습니다.mouseenter
이벤트 및
[CSS21]에서 설명하는 CSS :hover
의사 클래스와 유사성을 가집니다.
pointerleave
이벤트도 확인하시길 바랍니다.
pointerdown
이벤트유저 에이전트는 반드시 포인터 이벤트가 활성 버튼 상태일 때 pointerdown
포인터 이벤트를 발생시켜야 합니다. [MUST] 마우스에서, 버튼이 눌리지 않은 상태에서 하나 이상의 버튼이 눌려진 사이를 나타냅니다. 터치에서, 디지타이저에 물리적으로 접촉했을 때를 나타냅니다. 펜에서, 디지타이저에 스타일러스 펜이 물리적으로 접촉했을 때를 나타냅니다.
pointerdown
과 pointerup
이 mousedown
과 mouseup
이벤트와 동일한 상황으로 발생하지 않음을 의미합니다. 더 자세한 정보는 코드를 포함한 버튼에서 확인 가능합니다.hover를 지원하지 않는 디바이스 입력에서, 유저 에이전트는 반드시 pointerdown
이벤트의 처리 이후 pointerenter
이벤트에 잇달아 pointerover
포인터 이벤트를 발생시켜야 합니다. [MUST]
isPrimary
속성값이 true
인 경우 작성자는 특정 pointerdown
이벤트 무효로 인한 호환 마우스 이벤트 의 발생을 막을 수 있습니다. 이는 포인터에 PREVENT MOUSE EVENT FLAG를 세웁니다. 그러나, 이는 mouseover
, mouseenter
, mouseout
, mouseleave
로 발생한 이벤트는 막을 수 없습니다.
pointermove
이벤트pointermove
포인터 이벤트를 발생시켜야 합니다. 여기에 더해, 버튼상태, 압력, 기울기, 접촉 기하 (즉 width
와 height
) 등 포인터가 변경되었을 때 및 상황이 이 스펙문서에서 정의하는 포인터 이벤트를 제공하지 않을 경우 유저 에이전트는 반드시 pointermove
포인터 이벤트를 발생시켜야 합니다.pointerup
이벤트pointerup
포인터 이벤트를 발생시켜야 합니다. [MUST] 마우스에서, 하나 이상의 버튼이 눌린 상태에서 버튼이 눌리지 않은 사이를 나타냅니다. 터치에서, 디지타이저에 물리적 접촉이 사라졌을 때를 나타냅니다. 펜에서, 디지타이저에 스타일러스 펜이 떼어졌을 때를 의미합니다.
hover를 지원하지 않는 디바이스 입력에서, 유저 에이전트는 반드시 pointerup
이벤트의 처리 이후 pointerleave
이벤트에 잇달아 pointerout
포인터 이벤트를 발생시켜야 합니다. [MUST]
pointerdown
과 pointerup
이 mousedown
과 mouseup
이벤트와 동일한 상황으로 발생하지 않음을 의미합니다. 더 자세한 정보는 코드를 포함한 버튼에서 확인 가능합니다.pointercancel
이벤트pointercancel
포인터 이벤트를 발생시켜야 합니다.
pointerdown
이벤트 발생 이후, 포인터가 그 이후에 페이지 뷰포트 조작에 사용될 수도 있습니다. (즉, 패닝이나 줌)
pointercancel
이벤트 발생 이후, 유저 에이전트는 반드시 pointerleave
포인터 이벤트 발생에 뒤이어 pointerout
이벤트를 발생시켜야 합니다. [MUST]
이 섹션은 표준에 준하는 내용이 아닙니다.
유저 에이전트에서 포인터가 제품 이벤트에 연이어지지 않도록 정의가능한 시나리오의 예제에 다음 제품 이벤트를 포함합니다:
디바이스의 스크린 방향 변경, accidental input 인식, 뷰포트 제어 포인터(즉, 패닝이나 줌)를 사용하는 방법은 이 스펙 문서의 범위에 포함하지 않습니다.
pointerout
이벤트pointerout
포인터 이벤트를 발생시켜야 합니다 [MUST]:
pointerup
이벤트 발생 후 (pointerup
).pointercancel
이벤트 발생 후 (pointercancel
).pointerleave
이벤트pointerup
및 pointercancel
이벤트의 결과를 포함하여 pointerleave
포인터 이벤트를 발생시켜야 합니다 [MUST] (pointerup
및 pointercancel
도 보시길 바랍니다).
유저 에이전트는 반드시 스타일러스 펜이 디지타이저에서 인식할 수 있는 hover 범위를 벗어난 경우 pointerleave
포인터 이벤트를 발생시켜야 합니다. 이 이벤트 타입은 pointerout
과 비슷하지만, 버블이 일어나지 않으며, 반드시 포인팅 디바이스가 요소 및 요소의 모든 자손의 범위를 벗어났을 때 발생하지 않는다는 차이가 있습니다.mouseleave
이벤트와, [CSS21]에서 소개하는 CSS :hover
의사 클래스가 있습니다. pointerenter
이벤트도 확인해보세요.gotpointercapture
이벤트gotpointercapture
포인터 이벤트를 발생시켜야 합니다 [MUST] 이 이벤트는 포인터 캡쳐를 받은 요소에서 발생합니다.
해당 포인트에 대한 후속 이벤트가 요소에서 발생합니다.
Setting Pointer Capture 및 Process Pending Pointer Capture 섹션을 보시길 바랍니다.
lostpointercapture
eventlostpointercapture
포인터 이벤트를 발생시켜야 합니다 [MUST] 이 이벤트는 반드시 캡쳐가 릴리즈된 이후 포인터 후속 이벤트보다 먼저 발생해야만 합니다. 이 이벤트는 포인터 캡쳐가 제거된 요소에서 발생합니다. 포인터를 위한 후속 이벤트는 이벤트 타겟을 결정하는 히트 테스팅 메커니즘을 따릅니다. (이 스펙문서의 범위에 포함되지 않습니다) Releasing Pointer Capture, Implicit Release of Pointer Capture, Process Pending Pointer Capture 섹션을 참고하시길 바랍니다.Element
인터페이스 확장아래 섹션에서는 이미 존재하는 [HTML5]에서 정의하는 Element
인터페이스에서 포인터 캡쳐의 해제 및 설정을 용이하게 하는 확장을 설명합니다.
partial interface Element {
attribute EventHandler ongotpointercapture;
attribute EventHandler onlostpointercapture;
void setPointerCapture (long pointerId);
void releasePointerCapture (long pointerId);
};
setPointerCapture
이 메서드는 호출한 요소에 인수 pointerId
로 식별하는 포인터를 위한 포인터 캡쳐를 설정합니다.
캡쳐가 해제될 때까지 포인터 후속 이벤트는 항상 이 요소를 대상으로 해야합니다. [MUST]
포인터는 반드시 이 메서드를 효율적으로 다루기 위해 활성 버튼 상태에 있어야 합니다, 그 외의 경우에는 자동으로 실패상태입니다. [MUST]
메서드의 인수가 어떤 활성 포인터와도 매치하지 않는 경우
InvalidPointerId
이름을 가진 DOMException
을 던질 수 있습니다.
Parameter | Type | Nullable | Optional | Description |
---|---|---|---|---|
pointerId | long | ✘ | ✘ |
void
releasePointerCapture
이 메서드는 호출한 요소에 인수 pointerId
로 식별하는 포인터를 위한 포인터 캡쳐를 해제합니다.
포인터 후속 이벤트는 이벤트 타겟을 결정하기 위해 히트 테스팅 메커니즘을 따라야 합니다. (이 스펙 문서의 범위에 포함하지 않습니다.)
메서드의 인수가 어떤 활성 포인터와도 매치하지 않는 경우
InvalidPointerId
이름을 가진 DOMException
을 던질 수 있습니다.
Parameter | Type | Nullable | Optional | Description |
---|---|---|---|---|
pointerId | long | ✘ | ✘ |
void
GlobalEventHandlers
인터페이스 확장아래 섹션에서는 이미 존재하는 [HTML5]에서 정의하는 GlobalEventHandlers
인터페이스에서 이벤트 핸들러 등록을 용이하게 하는 확장을 설명합니다.
partial interface GlobalEventHandlers {
attribute EventHandler onpointerdown;
attribute EventHandler onpointermove;
attribute EventHandler onpointerup;
attribute EventHandler onpointercancel;
attribute EventHandler onpointerover;
attribute EventHandler onpointerout;
attribute EventHandler onpointerenter;
attribute EventHandler onpointerleave;
};
onpointerdown
타입 EventHandler, pointerdown
이벤트 타입을 위한 이벤트 핸들러 IDL 속성 ([HTML5])
onpointermove
타입 EventHandler, pointermove
이벤트 타입을 위한 이벤트 핸들러 IDL 속성 ([HTML5])
onpointerup
타입 EventHandler, pointerup
이벤트 타입을 위한 이벤트 핸들러 IDL 속성 ([HTML5])
onpointercancel
타입 EventHandler, pointercancel
이벤트 타입을 위한 이벤트 핸들러 IDL 속성 ([HTML5])
onpointerover
타입 EventHandler, pointerover
이벤트 타입을 위한 이벤트 핸들러 IDL 속성 ([HTML5])
onpointerout
타입 EventHandler, pointerout
이벤트 타입을 위한 이벤트 핸들러 IDL 속성 ([HTML5])
onpointerenter
타입 EventHandler, pointerenter
이벤트 타입을 위한 이벤트 핸들러 IDL 속성 ([HTML5])
onpointerleave
타입 EventHandler, pointerleave
이벤트 타입을 위한 이벤트 핸들러 IDL 속성 ([HTML5])
터치 인풋에서, 모든 기본 액션과 포인트 이벤트는 뷰포트의 조작이 아니어야 합니다. (예. 패닝이나 주밍) [MUST NOT]
touch-action
속성Name: | touch-action |
---|---|
Value: | auto | none | [ pan-x || pan-y ] | manipulation |
Initial: | auto |
Applies to: | all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups. |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
Computed value: | Same as specified value. |
CSS touch-action
속성은 유저 에이전트에서 제공하는 터치 인풋의 기본 동작 트리거를 결정합니다. [MAY]
이는 패닝 혹은 주밍과 같은 동작에 제한되지 않습니다.
값은 아래 의미를 가집니다.
auto
에서 지원하는 모든 추가동작은 이 스펙문서의 범위에 포함하지 않습니다.auto
나 none
값을 위한 트리거 동작을 위한 인터렉션 및 제스쳐 정의는 이 스펙 문서의 범위에 포함하지 않습니다.touch-action
속성은 CSS width
와 height
속성을 지원하는 요소에만 적용 가능합니다. ([CSS21]).
이 제약사항은 유저 에이전트가 저 지연 터치 액션을 위한 최적화를 가능하도록 설계되었습니다.
치환되지 않은 inline 요소 <span>
같은 default로 지원하지 않는 요소 ([HTML5] 참고)를 위해 작성자는
CSS 속성 display
를 block
과 같이 설정할 수 있으며, 이는 width
와 height
를 가질 수 있게 할 것입니다.
미래의 스펙문서는 이 API를 모든 요소에서 사용 가능하도록 할 것입니다.
요소에서 유저 터치가 일어날 때, 그 터치의 효과는 touch-action
속성의 값과 요소의 기본 터치 동작, 그리고 그 조상에 의해 결정해야 합니다.
터치의 효과를 정의할 때, 인접한 조상(터치가 일어난 요소에서 시작하여)을 찾고 그 터치 동작을 기본으로 합니다.
그 후에 기본 터치 동작 요소와 히트 테스트 요소 사이 각 요소의 touch-action
속성을 조사합니다. (히트 테스트 요소와 기본 터치 동작 요소 양쪽 다 포함합니다)
만약 그 요소 중 어떤 요소의 touch-action
속성이 기본 터치 동작을 허용하지 않는다면, 아무것도 하지 않습니다.
그 외의 경우 요소에서 기본 터치 동작 실행의 목적에 맞게 터치를 시작하는 걸 허용합니다.
touch-action
값을 적용하고 처리하는 메서드는 이 스펙문서의 범위에 포함하지 않습니다.
유저 에이전트에서 터치 동작을 실행하는 동안, 유저 에이전트는 반드시 포인터의 후속 포인터 이벤트를 발생시켜서는 안됩니다. [MUST NOT]
유저 에이전트는 반드시 아래 케이스 모두가 true이며, 포인터 이벤트의 stream를 끝내기 위해서 반드시 pointercancel
포인터 이벤트를 발생시켜야 합니다. (그리고 후속으로 pointerout
이벤트와 하나 이상의 pointerleave
이벤트를 발생시켜야 합니다)
pointerdown
이벤트가 포인터를 위해 보내졌으며, pointerup
이나 pointercancel
이벤트가 아직 (위에서 언급한 pointerdown
에 따라) 포인터를 위해 보내지지 않은 경우<div style="touch-action: none;"> This element receives pointer events for all touches. </div>
<div style="touch-action: pan-x;"> This element receives pointer events when not panning in the horizontal direction. </div>
<div style="overflow: auto;"> <div style="touch-action: none;"> This element receives pointer events for all touches. </div> <div> Touches on this element MAY be consumed for manipulating the parent. </div> </div>
<div style="overflow: auto;"> <div style="touch-action: pan-y;"> <div style="touch-action: pan-x;"> This element receives pointer events for all touches because it allows only horizontal panning yet an intermediate ancestor (between it and the pannable element) only allows vertical panning. Therefore, no touch behaviors are allowed. </div> </div> </div>
포인터 캡쳐를 위한 특정 포인터 이벤트(호환 마우스 이벤트를 포함)가 포인트의 위치 히트 테스트 결과 외 특정 요소를 다시 목표로 삼을 수 있습니다.
이는 커스텀 슬라이더 컨트롤 같은 시나리오에서 유용합니다. ([HTML5] <input type="range">
과 유사한)
포인터 캡쳐는 슬라이더 thumb 요소를 설정하고, 포인터가 thumb를 벗어나더라도 슬라이드 앞뒤로 유저가 컨트롤 할 수 있도록 허용합니다.
element.setPointerCapture(pointerId)
메서드를 호출해 요소에 설정합니다.
이 메서드를 호출했을 때, 유저에이전트는 반드시 아래 스텝을 따라야 합니다. [MUST]
pointerId
가 활성 포인터 중 어느 것과도 매치하지 않는다면, InvalidPointerId
와 함께 DOMException
을 던집니다.Element
가 ownerDocument
의 트리에 포함되어있지 않다면, InvalidStateError
를 던집니다.pointerId
로, 이 메서드가 호출되는 Element
에 포인터 캡쳐 타겟 오버라이드 펜딩을 설정합니다. pointerover
, pointerout
, pointerenter
, pointerleave
이벤트는 더 이상 포인터에 의한 타겟이 아닌 다른 요소로써 캡쳐된 요소의 바운더리를 가로지를 때 생성됩니다.
이는 모든 다른 요소들에 이런 이벤트를 억제하는 효과를 가집니다.element.releasePointerCapture(pointerId)
메서드를 호출한 요소에 명시적으로 릴리즈됩니다.
이 메서드를 호출했을 때, 유저 에이전트는 반드시 아래 스텝을 동작시켜야합니다. [MUST]
pointerId
가 활성 포인터 중 어느 것과도 매치하지 않으며,
이 스텝이 포인터 캡쳐의 함축적 릴리즈의 결과로 호출되지 않았다면,
InvalidPointerId
와 함께 DOMException
을 던집니다.
pointerId
의 포인터 캡쳐 타겟 오버라이드가 이 메서드에 의해 호출된 Element
가 아닌 경우, 이 스텝을 제거합니다.pointerId
를 들어, 만약 정의되어있다면 포인터 캡쳐 타겟 오버라이드 펜딩을 클리어합니다setPointerCapture
와 releasePointerCapture
)가 없다고 하더라도 물리적으로 gotpointercapture
와 lostpointercapture
이벤트를 발생시킬 수 있습니다.
pointerup
이나 pointercancel
발생 이후 즉시, 유저 에이전트는 반드시 releasePointerCapture()
메서드가 pointerup
이나 pointercancel
이벤트의 pointerId
속성과 같은 인수를 가지고 호출한 듯 실행시켜 해치워야 합니다.
pointer capture target override가 ownerDocument
트리에서 없어질 때, 펜딩 포인터 캡쳐 타겟 오버라이드와 포인터 캡쳐 타겟 오버라이드 노드를 클리어하고, 문서에서 lostpointercapture
포인터 이벤트를 실행해야 합니다.
오늘날 어마어마한 양의 주요 웹 콘텐츠가 마우스 이벤트만을 위해 코드를 구성합니다. 아래서 설명하는 내용은 유저 에이전트가 아마도 이러한 콘텐츠에서 마우스 이벤트와 포인터 인풋을 매핑하여 호환시키는 방법에 대한 알고리즘을 설명합니다.
특별히 언급되어있지 않다면, 모든 매핑된 마우스 이벤트 타겟은 ownerDocument
트리에 더이상 참가하지 않는 타겟이 아닌 한 포인터 이벤트의 타겟과 동일합니다. [SHOULD] 이 케이스에서, 마우스 이벤트는 마우스 이벤트를 위해 생성된 새로운 이벤트 패스(새로운 타겟 노드)를 뜻하며 여전히 ownerDocument
트리에 참가하고 있는 오리지널 타겟의 가까운 조상 노드 (그렇게 할 때 트리로부터 제거된)에서 발생해야 합니다.
작성자는 pointerdown
이벤트를 취소함으로써 특정 호환 마우스 이벤트의 생성을 방지할 수 있습니다.
mouseover
, mouseout
, mouseenter
, mouseleave
이벤트는 절대 방지되지 않습니다. (포인터가 눌린 상태더라도)이 스펙문서에서 마우스 이벤트와 매핑 호환은 선택사항인 특성입니다. 유저 에이전트는 존재하는 레거시 콘텐츠와 더 좋은 호환성을 보이기 위해 이 특성을 지원하기를 권장합니다. 마우스 이벤트와 매핑 호환을 지원하지 않는 유저에이전트더라도 click
과 contextmenu
이벤트는 여전히 지원하기를 권장합니다. (이어지는 노트 참고).
[DOM-LEVEL-3-EVENTS]에서 정의하는 click
이벤트와 [HTML5]에서 정의하는 contextmenu
이벤트는 유저 인터페이스 활성화에 물리적으로 묶여있으며 키보드 같은 다른 인풋 기기에서 활성화될 수 있기 때문에 호환 마우스 이벤트로 고려하지 않아도 됩니다.
click
과/이나 contextmenu
발생을 지원하는 유저 에이전트에서, click
과/이나 contextmenu
가 발생했는지 안했는지에 따라 영향을 받지 않기 위해 물리적으로 포인터 이벤트가 발생하는 동안 preventDefault
를 호출해야 합니다. 왜냐하면 이 이벤트들은 마우스 이벤트와 호환하지 않으며, 유저 에이전트는 물리적으로 기본 포인터가 아닌 포인터를 포함한 모든 포인팅 디바이스에서 click
과 contextmenu
를 호출하기 때문입니다.
포인터 이벤트와 함께 동작하는 고 레벨 이벤트의 상대 명령 (click
, contextmenu
, focus
, blur
, etc.)은 정의되어있지 않으며 유저 에이전트에 따라 다릅니다. 예를 들어 몇몇 유저 에이전트는 contextmenu
를 pointerup
에 따라서 동작시키고, 다른 유저 에이전트는 pointerup
이나 pointercancel
에 앞서 동작시키기도 하며, 몇 시뮬레이션에서는 포인터 이벤트가 발생하지 않았을 때 (키보드 숏컷 같은 것들) 발생시키기도 했습니다
isPrimary
속성이 false
를 나타내는 경우 포인터 이벤트를 처리하고 이 스텝을 제거합니다.pointerdown
을 나타내고 이벤트가 취소되었다면, 이 pointerType
을 위한 PREVENT MOUSE EVENT 플래그를 설정합니다.pointerover
라면, mouseover
이벤트를 발생시킵니다.pointerout
이라면, mouseout
이벤트를 발생시킵니다.pointerenter
라면, mouseenter
이벤트를 발생시킵니다.pointerleave
라면, mouseleave
이벤트를 발생시킵니다.pointerType
을 위한 PREVENT MOUSE EVENT 플래그가 설정되지 않았고 포인터 이벤트의 처리가:
pointerdown
이라면, mousedown
이벤트를 발생시킵니다.pointermove
라면, mousemove
이벤트를 발생시킵니다.pointerup
이라면, mouseup
이벤트를 발생시킵니다.pointercancel
이라면, window
에서 mouseup
이벤트를 발생시킵니다.pointerup
이나 pointercancel
로 처리된다면, 이 pointerType
을 위한 PREVENT MOUSE EVENT 플래그를 클리어합니다.mousemove
이벤트 같은 걸 제공할 수 있습니다.isPrimary
속성이 false
를 나타내는 경우 포인터 이벤트를 처리하고 이 스텝을 제거합니다.pointerover
나 pointerdown
이벤트로 처리하는 경우, mousemove
이벤트를 발생시킵니다. (레거시 마우스 정의 코드와 호환을 위해)pointerdown
을 나타내고 이벤트가 취소되었다면, 이 pointerType
을 위한 PREVENT MOUSE EVENT 플래그를 설정합니다.pointerover
라면, mouseover
이벤트를 발생시킵니다.pointerout
이라면, mouseout
이벤트를 발생시킵니다.pointerenter
라면, mouseenter
이벤트를 발생시킵니다.pointerleave
라면, mouseleave
이벤트를 발생시킵니다.pointerType
을 위한 PREVENT MOUSE EVENT 플래그가 설정되지 않았고 포인터 이벤트의 처리가:
pointerdown
이라면, mousedown
이벤트를 발생시킵니다.pointermove
라면, mousemove
이벤트를 발생시킵니다.pointerup
이라면, mouseup
이벤트를 발생시킵니다.pointercancel
이라면, window
에서 mouseup
이벤트를 발생시킵니다.pointerup
이나 pointercancel
로 처리된다면, 이 pointerType
을 위한 PREVENT MOUSE EVENT 플래그를 클리어합니다.(터치스크린 상 하나의 손가락 같이) hover를 지원하지 않는 기본 포인터와 함께 요소의 활성화 (click
)는 물리적으로 아래 이벤트 시퀀스를 생산해야 합니다.
mousemove
pointerover
mouseover
pointerenter
mouseenter
pointerdown
mousedown
pointermove
와 mousemove
이벤트pointerup
mouseup
click
pointerout
mouseout
mouseleave
그러나 만약에 pointerdown
이벤트가 이런 인터렉션 중에 캔슬된다면 이벤트의 시퀀스는,
mousemove
pointerover
mouseover
pointerenter
mouseenter
pointerdown
pointermove
와 mousemove
이벤트pointerup
click
pointerout
mouseout
mouseleave
Many thanks to lots of people for their proposals and recommendations, some of which are incorporated into this document. The group's Chair acknowledges contributions from the following group members: Arthur Barstow, Matt Brubeck, Rick Byers, Cathy Chan, Scott González, Patrick H. Lauke, Sangwhan Moon, Olli Pettay, Jacob Rossi, Doug Schepers and Asir Vedamuthu.
Special thanks to those that helped pioneer the first edition of this model, including especially: Charu Chandiram, Peter Freiling, Nathan Furtwangler, Thomas Olsen, Matt Rakow, Ramu Ramanathan, Justin Rogers, Jacob Rossi, Reed Townsend, Steve Wright.
이 섹션은 표준에 준하지 않습니다.
The following is an informative summary of substantial and major editorial changes between publications of this specification. A complete revision history of the Editor's Drafts of this specification can be found here.
This section is non-normative.