제스처 이벤트

제스처 이벤트는 W3C 포인터 이벤트 모델 위에 빌드됩니다. 제스처 이벤트를 사용하면 개별 포인터 이벤트를 직접 캡처 및 해석할 필요 없이 손가락 모으기, 회전, 살짝 밀기, 끌기 등의 더 복잡한 터치 기반 사용자 조작을 인식하고 이에 응답할 수 있습니다.

참고  이 섹션에서 설명하는 API는 Windows 7 이하에서 지원되지 않습니다.

제스처 이벤트 및 MSGesture 개체

사이트에서 제스처를 처리하기 위한 첫 단계는 제스처 개체를 인스턴스화하는 것입니다.


var myGesture = new MSGesture();

다음으로 제스처에 대상 요소를 제공합니다. 이 요소는 브라우저가 제스처 이벤트를 실행하는 대상입니다. 또한 이벤트에 대한 좌표 공간을 결정하는 요소입니다.


elm = document.getElementById("someElement");
myGesture.target = elm;
elm.addEventListener("MSGestureChange", handleGesture);

마지막으로 제스처 개체에 제스처 인식에서 처리할 포인터를 알립니다.


elm.addEventListener("pointerdown", function (evt) {
// adds the current mouse, pen, or touch contact for gesture recognition
myGesture.addPointer(evt.pointerId);
});

참고  touchAction CSS 스타일시트 속성을 사용하여 요소가 이동, 확대/축소 같은 기본 터치 동작을 수행하지 않고 입력에 대한 포인터 이벤트를 제공하도록 구성합니다. 자세한 내용은 기본 터치 환경 제어를 참조하세요.

제스처 이벤트 처리

제스처 개체에 유효한 대상과 포인터가 1개 이상 추가되면 개체는 제스처 이벤트를 실행하기 시작합니다. 이러한 이벤트에 대해 디스패치되는 MSGestureEvent 개체에는 크기 조정(손가락 모으기), 회전, 변환 및 속도에 대한 information이 포함됩니다. detail 속성에는 플래그 비트 마스크 형식으로 제스처 이벤트의 상태에 대한 추가 정보가 포함됩니다.

제스처 플래그설명
MSGESTURE_FLAG_NONE0정상 상태입니다.
MSGESTURE_FLAG_BEGIN1제스처 이벤트가 시작되었습니다.
MSGESTURE_FLAG_END2제스처 이벤트가 종료되었습니다.
MSGESTURE_FLAG_CANCEL4제스처 이벤트가 취소되었습니다. 이 플래그는 종종 MSGESTURE_FLAG_END와 함께 AND 처리됩니다.
MSGESTURE_FLAG_INERTIA8제스처가 관성 단계에 있습니다. 이 플래그는 화면의 요소가 이동하는 동안 MSGestureChange 이벤트를 통해 지속적으로 전송됩니다.

 

자세한 내용은 Gesture flags 참조의 "설명" 섹션을 참조하세요.

단순한 제스처 및 복잡한 제스처

제스처 이벤트는 탭하기 또는 길게 누르기처럼 단순하거나 손가락 모으기, 회전 또는 살짝 밀기처럼 복잡할 수 있습니다.

탭하기

가장 기본적인 제스처 인식은 탭하기입니다. 탭하기가 검색되면 제스처 개체의 대상 요소에서 MSGestureTap 이벤트가 실행됩니다. click 이벤트와 다르게 탭하기 제스처는 사용자가 이동 없이 아래로 및 위로 터치하거나 마우스 단추를 누르거나 펜을 터치할 경우에만 실행됩니다. 이 이벤트는 사용자의 요소 탭하기와 요소 끌기를 구분하려는 경우 유용합니다.

길게 누르기

길게 누르기 제스처는 사용자가 한 손가락으로 아래로 터치하고 잠시 동안 길게 누른 후 이동 없이 들어올릴 때 발생합니다. 길게 누르기 조작 중에 MSGestureHold 이벤트는 다양한 제스처 상태를 위해 두 번 이상 실행됩니다.


element.addEventListener("MSGestureHold", handleHold);
function handleHold(evt) {
if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {
// Begin signals the start of a gesture. For the hold gesture, this means the user has been holding long enough in place that the gesture will become a complete press & hold if the finger is lifted.
}
if (evt.detail & evt.MSGESTURE_FLAG_END) {
// End signals the end of the gesture.
}
if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {
// Cancel signals the user started the gesture but cancelled it. For hold, this occurs when the user drags away before lifting. This flag is sent together with the End flag, signaling the gesture recognition is complete.
}
}


복잡한 제스처(손가락 모으기, 회전, 살짝 밀기 및 끌기)

손가락 모으기나 회전 같은 동적 제스처는 CSS2D 변형과 유사한 변형 형식으로 보고됩니다. 동적 제스처에 대한 세 가지 이벤트인 MSGestureStart, MSGestureChange(제스처가 계속될 때 반복적으로 실행됨) 및 MSGestureEnd가 실행됩니다.

동적 제스처는 변형을 보고하므로 MSGesture와 CSS 2D 변형을 사용하여 사진이나 퍼즐 조각 같은 요소를 손쉽게 조작할 수 있습니다. 다음과 같은 코드를 사용하여 요소의 크기 조정, 회전 및 끌기를 사용하도록 설정할 수 있습니다.


targetElement.addEventListener("MSGestureChange", manipulateElement);
function manipulateElement(e) {
// Uncomment the following code if you want to disable the built-in inertia provided by dynamic gesture recognition
// if (e.detail == e.MSGESTURE_FLAG_INERTIA)
// return;
 
var m = new MSCSSMatrix(e.target.style.transform); // Get the latest CSS transform on the element
e.target.style.transform = m
.translate(e.offsetX, e.offsetY) // Move the transform origin under the center of the gesture
.rotate(e.rotation * 180 / Math.PI) // Apply Rotation
.scale(e.scale) // Apply Scale
.translate(e.translationX, e.translationY) // Apply Translation
.translate(-e.offsetX, -e.offsetY); // Move the transform origin back
}


각각 CTRL 또는 SHIFT 보조 키로 마우스 휠을 회전하여 마우스를 통해 크기 조정 및 회전 같은 동적 제스처를 지원합니다.

관성 정보

관성이란 화면과의 접촉을 끝낸 후에도 계속되는 움직임을 말합니다. 관성 지원은 제스처 개체에 기본 제공되므로 이벤트 처리기 이외의 추가 코드는 필요하지 않습니다. 살짝 밀기 속도에 따라 MSGestureEnd 이벤트가 발생하기 전에 MSInertiaStart 이벤트 뒤에 일련의 MSGestureChange 이벤트가 발생합니다. MSInertiaStart 이벤트는 살짝 밀기 동작으로 인식될 만큼 속도가 충분히 빠를 때만 발생하므로 코드에서 느린 이동과 빠른 긋기를 구분하는 데 도움이 됩니다.

API 참조

MSGesture
MSGestureEvent
MSManipulationEvent

샘플 및 자습서

HTML5를 사용하여 Mandelbrot 집합을 탐색하는 방법
터치 사용 장치에서 가리키기를 시뮬레이션하는 방법
Canvas, SVG 및 멀티 터치를 사용하여 타일식 퍼즐 게임을 만드는 방법
터치 지원 사이트 구현
포인터 및 제스처 샘플

Internet Explorer 테스트 드라이브 데모

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

IEBlog 게시물

IE11: 최신 웹 터치 검색 등
상호 운용성 있는 포인터 이벤트 지향: 여러 장치에 대한 입력 이벤트 발전
제스처 이벤트를 사용하여 이동, 확대/축소 및 탭 이상의 기능 수행
터치가 용이한 사이트 빌드 지침
모든 브라우저에서 멀티 터치 및 마우스 입력 처리
IE10 및 Windows 스토어 앱의 터치식 입력

관련 항목

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

 

 

표시:
© 2015 Microsoft