포인터 이벤트

Windows 8부터 Internet Explorer는 사용자 입력을 처리하기 위한 W3C 포인터 이벤트를 지원합니다. 포인터 이벤트는 마우스, 터치, 펜을 포함하여 모든 사용자 입력 형식에 적용할 포인터의 추상 개념을 사용한다는 점을 제외하고 기존 마우스 이벤트 후에 모델링됩니다. 포인터 이벤트를 사용하여 하드웨어 기능 전체에서 작동하는 단일 이벤트 집합을 작성하여 원활한 사용자 환경을 만듭니다.

포인터 이벤트 및 PointerEvent 개체

PointerEvent 개체는 MouseEvent에서 상속하고 유사한 사용자 조작 시 디스패치됩니다.

마우스 이벤트일치하는 포인터 이벤트
mousedown pointerdown
mouseenter pointerenter
mouseleave pointerleave
mousemove pointermove
mouseout pointerout
mouseover pointerover
mouseup pointerup

 

PointerEvent개체는 마우스 이벤트에 필요한 모든 일반 속성(예: clientX /clientY 좌표, target 요소 및 button / buttons 속성) 외에도 입력 유형과 특성을 구분하는 데 도움이 되는 추가 속성을 제공합니다.

PointerEvent 속성설명

height

포인터의 접촉 기하 도형의 높이(Y축의 크기)로서, CSS 픽셀 단위입니다.

isPrimary

이벤트와 연관된 포인터가 현재 마우스, 터치 또는 펜 조작 중 어떤 조작의 기본 포인터인지를 반환합니다.

pointerId

터치, 마우스 또는 펜 접촉의 고유 식별자입니다.

pointerType

이벤트의 소스가 터치인지 펜인지 아니면 마우스인지를 반환합니다.

pressure

[0,1] 범위에서 정규화된 포인터 입력의 압력을 반환합니다. 여기서 0과 1은 각각 하드웨어에서 검색할 수 있는 최소 압력과 최대 압력을 나타냅니다.

tiltX

Y-Z 평면과 Y축과 펜 축을 포함하는 평면 사이의 각도를 -90 ~ +90 범위로 반환합니다. 양의 X 기울기는 오른쪽을 향합니다.

tiltY

X-Z 평면과 변환기-X 평면 간의 각도를 반환합니다. 양의 Y 기울기는 사용자를 향합니다.

width

포인터의 접촉 기하 도형의 너비(X축의 크기)를 CSS 픽셀 단위로 반환합니다.

 

마우스 호환성

포인터 이벤트가 발생한 후 IE에서는 주 접촉(예: 화면의 첫 번째 손가락)에 대해 마우스 이벤트를 발생시킵니다. 그러면 마우스 이벤트를 기반으로 하는 기존 웹 사이트가 계속 제대로 작동할 수 있습니다.

마우스와 반대로, 화면에서 한 번에 여러 포인터를 사용할 수 있습니다(예: 멀티 터치 하드웨어 사용). 이 시나리오에서는 각 접촉 지점에 대해 별도의 포인터 이벤트가 발생하며 멀티 터치 사용 사이트와 앱을 더 쉽게 빌드할 수 있습니다.

기능 검색 및 터치 지원 테스트

PointerEvent 인터페이스를 사용하여 포인터 이벤트 지원을 테스트할 수 있습니다.


if (window.PointerEvent) {
  // Pointer events are supported.
}

포인터 이벤트 기능 검색은 장치 자체에서 터치 또는 펜 입력을 지원하는지를 나타내지 않습니다. PointerEvent 속성은 시스템에 있는 하드웨어가 무엇이든 플랫폼이 하드웨어에 대한 포인터 이벤트를 발생하는지만 확인합니다.

터치 기능과 멀티 터치 지원을 테스트하려면 maxTouchPoints 속성을 사용합니다.


// Test for touch capable hardware 
if(navigator.maxTouchPoints) { ... }

// Test for multi-touch capable hardware
if(navigator.maxTouchPoints && navigator.maxTouchPoints > 1) { ... }

// Check the maximum number of touch points the hardware supports
var touchPoints = navigator.maxTouchPoints;

기본 터치 처리를 위한 제어

Windows 8부터 IE는 스크롤 가능 영역에 대한 이동, 손가락 모으기로 확대/축소 및 HTML5 끌어서 놓기 지원을 포함하여 길게 눌러 끌기의 사용자 조작 순서로 활성화되는 터치에 대한 공통 터치 조작에 대한 기본 처리를 제공합니다. touch-action CSS 속성을 사용하여 터치 입력과 기본 터치 처리 동작으로 지정된 페이지 영역을 조작할 수 있는지 여부와 조작하는 방법을 지정할 수 있습니다.

다음 스타일 규칙은 모든 기본 터치 처리를 사용하지 않도록 설정하고 모든 포인터 이벤트를 JavaScript 코드로 전송합니다.


touch-action: none;

자세한 내용은 기본 터치 환경 제어를 참조하세요.

요소에서 포인터 이벤트 캡처

경우에 따라 특정 포인터를 요소에 할당하여 접촉이 요소를 벗어나더라도 요소가 계속해서 포인터 이벤트를 수신하도록 하는 것이 좋습니다.

예를 들어 웹앱의 UI 단추를 길게 터치하고 사용자의 손가락이 단추를 올리기(접촉을 중단하기) 전에 단추를 밀어 내면 단추가 pointerup 이벤트를 수신할 수 있습니다. 이로 인해 단추가 계속 눌려 있을 수 있습니다. 포인터를 단추 요소에 할당하면 단추는 단추에 초기 상태로 돌아가도록 신호하는 pointerup 이벤트를 포함하여 포인터 이벤트를 수신합니다.

요소 개체의 setPointerCapture 메서드를 호출하여 특정 pointerId를 해당 요소에 할당할 수 있습니다.


window.addEventListener('pointerdown', pointerdownHandler, false);

function pointerdownHandler (evt) {
      evt.target.setPointerCapture(evt.pointerId);
}

포인터가 요소로 캡처될 경우 부모 및 및 상위 항목 요소는 캡처 및 버블 단계 중에 gotpointercapture 이벤트를 수신합니다.

포인터가 releasePointerCapture 메서드 호출을 통해 명시적으로 해제되거나 제거되면(pointerup) 캡처가 해제됩니다. 요소가 캡처를 손실하는 경우도 있습니다. 예를 들어 터치가 창을 벗어나거나 일부 다른 요소가 터치를 캡처하는 경우 캡처가 있던 요소는 캡처를 손실합니다. 캡처를 손실한 요소는 lostpointercapture 이벤트를 수신합니다.

포인터 취소

터치 또는 펜 입력을 사용할 때 화면의 포인터가 취소될 수도 있습니다. 예를 들어 화면이 셋 이상의 동시 터치 지점을 지원하지 않는 경우 세 번째 손가락을 화면에 추가하면 하드웨어에서 세 개의 지점을 추적할 수 없기 때문에 다른 지점 중 하나가 취소됩니다. 포인터 취소는 pointercancel 이벤트에 의해 시작됩니다. 따라서 필요한 정리를 처리할 수 있습니다. 예를 들어 앱이 포인터 목록을 유지하는 경우 pointercancel 이벤트를 수신 대기하여 지정된 포인터를 해당 목록에서 제거하는 시기를 알 수 있습니다.

호환성 정보

W3C 포인터 이벤트 사양의 후보 권고를 준수하기 위해 포인터 이벤트의 Internet Explorer 11 구현은 Internet Explorer 10 구현에서 약간 변경되었습니다. 전체 목록은 IE 호환성 도움말에서 포인터 이벤트 업데이트를 참조하세요.

HandJSJavaScript 보충 기능은 아직 W3C 포인터 이벤트를 지원하지 않는 브라우저에서 포인터 이벤트 모델을 작성하는 데 사용할 수 있는 라이브러리를 제공합니다. 데모를 보려면 Hand.JS를 통해 범용 가상 터치 조이스틱 만들기를 참조하세요.

API 참조

PointerEvent

샘플 및 자습서

터치 지원 사이트 구현
포인터 및 제스처 샘플

Internet Explorer 테스트 드라이브 데모

Mandelbrot 탐색기
브라우저 표면
터치 효과
벽돌 깨기

IEBlog 게시물

W3C에서 포인터 이벤트를 후보 권장으로 전환
W3C에서 마지막 호출 작업 초안을 게시할 때 포인터 이벤트에 대해 자세히 알아보기
W3C 헌장 포인터 이벤트 작업 그룹
상호 운용성 있는 포인터 이벤트 지향: 여러 장치에 대한 입력 이벤트 발전
터치가 용이한 사이트 빌드 지침
모든 브라우저에서 멀티 터치 및 마우스 입력 처리
IE10 및 Windows 스토어 앱의 터치식 입력

사양

포인터 이벤트 사양

관련 항목

Hand.JS를 통해 모든 터치 모델에서 작동하는 범용 가상 터치 조이스틱 만들기
제스처 이벤트
Hand.js: 모든 브라우저에서 포인터 이벤트를 지원하기 위한 보충 기능
터치를 사용한 스크롤 및 확대/축소
터치 및 마우스 통합: 포인터 이벤트를 통해 브라우저 간 터치 지원을 쉽게 구현하는 방법

 

 

표시:
© 2015 Microsoft