내보내기(0) 인쇄
모두 확장

Internet Explorer 10의 포인터 및 제스처 이벤트

참고  이러한 항목에 대한 최신 개요는 포인터 이벤트제스처 이벤트 항목을 참조하세요.

주의  W3C 포인터 이벤트 사양은 Internet Explorer 10에서 구현된 이후로 여러 차례 수정을 거쳤습니다. 또한 포인터 이벤트 API의 MS 공급업체 접두사는 Internet Explorer 11부터 사용되지 않습니다. 변경 내용에 대한 요약 및 호환성 모범 사례를 확인하려면 포인터 이벤트 업데이트를 참조하세요.

Internet Explorer 10 및 JavaScript로 작성된 Windows 8용 Windows 스토어 앱은 웹 플랫폼에서 터치 및 펜 입력 처리를 새롭게 지원합니다. 각 입력 유형을 별도로 처리하는 코드를 만들도록 요구하는 대신, Internet Explorer 10에서는 포인터라는 개념이 도입됩니다.

포인터는 마우스, 손가락 또는 펜 등 화면의 모든 접촉 지점입니다. 이제 마우스, 터치 및 펜의 입력을 캡슐화하는 단일 포인터 이벤트 집합을 작성하여 입력 하드웨어 및 폼 팩터 전체에서 일관된 환경을 손쉽게 제공할 수 있습니다.

포인터 이벤트

마우스 이벤트와 마찬가지로, 포인터 이벤트는 각 포인터의 down, move, up, over 및 out에서 발생합니다.

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

포인터 취소

터치 또는 펜 입력을 사용할 때 화면의 포인터가 취소될 수도 있습니다. 예를 들어 화면이 셋 이상의 동시 터치 지점을 지원하지 않는 경우 세 번째 손가락을 화면에 추가하면 하드웨어에서 세 개의 지점을 추적할 수 없기 때문에 다른 지점 중 하나가 취소됩니다. 포인터 취소는 MSPointerCancel 이벤트에 의해 시작됩니다.

마우스 호환성

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

기능 검색

다음은 포인터 이벤트 지원을 검색하는 최상의 방법입니다.


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

이 기능 검색이 장치에서 터치 또는 펜 입력을 지원한다는 표시는 아닙니다. 대신, 플랫폼이 시스템에 있는 하드웨어에 대해 포인터 이벤트를 발생시킴을 나타냅니다.

다음 예제는 포인터 이벤트를 통해 마우스, 터치 및 펜으로 작동하는 기본 손가락 페인트 앱입니다.


<!DOCTYPE html>
<html>
<head>
  <title>Scribble touch example</title>
<style>
  html { 
    -ms-touch-action: none; /* Direct all pointer events to JavaScript code. */
  }
</style>

<script>
  window.addEventListener('load', function () {
    var canvas = document.getElementById("drawSurface"),
    context = canvas.getContext("2d");
    if (window.navigator.msPointerEnabled) {
      canvas.addEventListener("MSPointerMove", paint, false);
    }
    else {
      canvas.addEventListener("mousemove", paint, false);
    }
    function paint(event) {
      // paint a small rectangle every time the event fires. 
      context.fillRect(event.clientX, event.clientY, 5, 5);
    }
  });
</script>

</head>
<body>

  <canvas id="drawSurface" width="500px" height="500px" style="border:1px solid black;">Canvas isn't supported by this browser or document mode</canvas>
</body>
</html>


일반적인 터치 최적화 방법

Internet Explorer 10은 다음과 같은 기본 터치 조작 방식에 대해 일반적인 기본 처리를 제공합니다.

  • 스크롤 가능 영역에 대한 이동
  • 손가락을 모아 확대/축소
  • 길게 눌러 표시하는 상황에 맞는 메뉴
  • 터치 선택

이러한 기능은 자동으로 작동하므로 사이트와 앱에 기본적으로 우수한 터치 환경이 제공됩니다. 그러나 이 기능을 사용하지 않고 고유한 환경을 사용할 수도 있습니다.

터치 지원 테스트

msMaxTouchPoints 속성을 사용하면 터치 기능과 멀티 터치 지원 여부를 쉽게 테스트할 수 있습니다. 장치에서 터치 기능의 지원 여부와 지원하는 경우 지원되는 터치 지점 수를 확인하려면 다음을 사용하세요.

// To test for touch capable hardware 
if(navigator.msMaxTouchPoints) { ... }

// To test for multi-touch capable hardware
if(navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) { ... }

// To get the maximum number of points the hardware supports
var touchPoints = navigator.msMaxTouchPoints;


이동 및 확대/축소

이동 또는 확대/축소하는 동안에는 포인터 이벤트가 발생하지 않습니다. 이전 페인트 응용 프로그램 예제와 같은 시나리오에서 이동 및 확대/축소를 사용하지 않도록 설정하여 이러한 이벤트를 고유한 용도로 사용할 수 있습니다. 예를 들어, 이렇게 하려면 CSS 스타일시트를 사용합니다.


.disablePanZoom {
  -ms-touch-action: none; /* Disables all pan/zoom behaviors and fire pointer events in JavaScript instead. */
}

터치 선택

Internet Explorer 10에서 텍스트나 그 주변을 탭하면 터치를 사용하여 단어를 선택할 수 있습니다. 텍스트 선택을 사용하지 않으려면 Windows Internet Explorer 9에서처럼 하면 됩니다.


element.addEventListener("selectstart", function(e) { e.preventDefault(); }, false);
 // Disables selection


상황에 맞는 메뉴

Windows Internet Explorer에서 특정 요소를 길게 누르면 상황에 맞는 메뉴가 표시됨을 나타내는 대기 비주얼이 표시됩니다. 손가락을 올리면 상황에 맞는 메뉴가 표시됩니다. 손가락을 멀리 끌면 비주얼이 해제되고 상황에 맞는 메뉴가 나타나지 않습니다.

고유한 상황에 맞는 메뉴를 사용하려는 경우 Internet Explorer 10에서도 여전히 사용할 수 있습니다. contextmenu 이벤트에서 event.preventDefault를 호출하고 상황에 맞는 메뉴를 표시하는 코드를 실행하면 됩니다. 그러면 Internet Explorer에서 터치 기능이 지원되는 상황에 맞는 메뉴를 자동으로 만들고 길게 누를 때 동일한 힌트 비주얼을 제공합니다. 이 예제에서는 contextmenu 이벤트를 사용하여 사용자가 요소를 길게 누르고 해제할 때를 감지합니다. 사용자가 손가락을 올리면 contextmenu 이벤트가 발생하고 메시지가 표시됩니다.


<!DOCTYPE html>
<html >
<head>
     <title>Touch and hold example</title>
  <style>
   
    #touchspot {
      width:100px;
      height:100px;
      background-color:aquamarine;
      border:solid 2px black;
    }
  </style>

</head>
<body>
  <div id="touchspot">Touch and hold me</div>

  <script>
    var elm = document.getElementById("touchspot");

    elm.addEventListener("contextmenu", function (e) {
      e.target.innerHTML = "Touch has pressed, held, and lifted, or mouse has been right clicked. Time to show a custom menu.";
      e.preventDefault();    // Disables system menu
    }, false);

  </script>
</body>
</html>


잠시 손가락을 누르고 있어야 하는 게임 등의 시나리오에서 상황에 맞는 메뉴를 사용하지 않으려는 경우 기본 상황에 맞는 메뉴와 힌트 비주얼을 모두 비활성화할 수 있습니다. 이렇게 하려면 두 개 이벤트를 취소하면 됩니다.



 // Disables visual
element.addEventListener("MSHoldVisual", function(e) { e.preventDefault(); }, false);
// Disables menu
element.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);
 

제스처 개체 및 이벤트

포인터 이벤트 외에도 Windows 8에서는 여러 응용 프로그램의 복잡한 조작 방식(제스처라고 함)(예: 손가락 모으기, 살짝 밀기 등)을 일관된 방식으로 인식할 수 있습니다.

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

이전 예제에 사용된 MSGesture 개체를 사용하면 직접 모든 포인터 이벤트를 캡처하지 않고 누르기, 이동, 탭 등의 상위 수준 제스처를 쉽게 사용하도록 설정할 수 있습니다. 문제는 onmspointerdown 이벤트를 캡처하고 대상(제스처 이벤트에서 사용할 개체)이 있는 MSGesture 개체와 pointerId를 구성해야 한다는 것입니다. MSGesture 개체를 인스턴스화하고 구성하지 않으면 요소에서 포인터 이벤트만 발생합니다.

제스처 이벤트에는 직선 포인터 이벤트보다 더 많은 추가 정보가 통합되어 있습니다. 예를 들어 사용자가 터치하고 즉시 손가락을 들면 MSGestureTap 이벤트가 발생합니다. 사용자가 화면을 터치하고 손가락을 그대로 두면 MSGestureHold 이벤트가 발생합니다.

사용자가 손가락을 살짝 밀면 MSGestureStart, MSGestureChangeMSGestureEnd 이벤트가 발생합니다.

사용자가 빨리 살짝 밀고 손가락을 들면 MSInertiaStart 이벤트가 발생합니다.

참고  MSGestureChange 이벤트에 대한 이벤트 detail 속성이 event.MSGESTURE_FLAG_INERTIA와 같을 때 제스처가 관성 단계에 있는 경우를 감지할 수 있습니다.

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

기본 제스처 이벤트는 다음과 같습니다.

모든 이벤트에 전달되는 MSGestureEvent 개체는 앱에서 조작되는 개체의 상태를 결정하는 데 도움이 되는 속성을 반환합니다. 사용자가 요소를 확대/축소하거나 크기를 조정하려 했는지 여부를 확인하려면 scale 속성을 사용하세요. 사용자가 화면에서 요소를 회전하는 경우에는 rotation 속성을 사용하여 각도(라디안)를 구할 수 있습니다. 이 두 속성은 모두 마지막 MSGestureEvent가 발생한 이후에 수행된 변경 사항입니다.

제스처 플래그

MSGesture 플래그는 MSGestureStart, MSGestureChange 또는 MSGestureHold와 같은 이벤트 개체 상태를 반환합니다. 이러한 플래그는 다음과 같습니다.

  • MSGESTURE_FLAG_NONE - 특별한 상태가 없습니다.
  • MSGESTURE_FLAG_BEGIN - 제스처 이벤트 시작을 나타내는 플래그입니다.
  • MSGESTURE_FLAG_END - 제스처 이벤트 종료를 나타내는 플래그입니다.
  • MSGESTURE_FLAG_CANCEL - 제스처 이벤트가 취소되었음을 나타내는 플래그입니다.
  • MSGESTURE_FLAG_INERTIA - 컴퓨터가 관성 단계에 있음을 나타내는 플래그입니다.

예를 들어 사용자가 화면에서 손가락을 살짝 밀면 다음과 같이 이벤트 및 세부 정보가 발생합니다.

  • MSGestureStart 이벤트가 발생하고 MSGESTURE_FLAG_BEGIN 플래그가 지정됩니다.
  • 사용자가 손가락을 움직일 때 MSGestureChange 이벤트가 반복적으로 발생하고 detail 속성을 통해 MSGESTURE_FLAG_NONE 플래그가 전달됩니다.
  • 사용자가 손가락을 올리면 MSInertiaStart 이벤트가 발생하고 MSGESTURE_FLAG_INERTIA 플래그가 전달됩니다.
  • 요소가 화면에서 여전히 계속해서 이동하는 동안에는 MSGESTURE_FLAG_INERTIA 플래그가 전달되면서 MSGestureChange 요소가 계속 발생합니다.
  • 이동이 끝나면 MSGestureEnd 이벤트가 발생하고 MSGESTURE_FLAG_INERTIA와 MSGESTURE_FLAG_END라는 두 개 플래그가 detail 속성을 통해 전달됩니다.

사용자가 화면을 몇 초 동안 길게 누른 다음 손가락을 이동하는 경우 다음과 같이 이벤트 및 세부 정보가 발생합니다.

  • 몇 초가 지난 후 MSGestureHold 이벤트가 발생하고 MSGESTURE_FLAG_BEGIN 플래그가 전달됩니다.
  • 사용자가 손가락을 움직이기 시작할 때 MSGestureHold 이벤트가 발생하고 MSGESTURE_FLAG_END 및 MSGESTURE_FLAG_CANCEL 플래그가 전달됩니다. 이는 길게 누름이 취소되었음을 나타냅니다.
  • 사용자가 손가락을 움직일 때 MSGestureChange 이벤트가 반복적으로 발생하고 detail 속성을 통해 MSGESTURE_FLAG_NONE 플래그가 전달됩니다. 여기서부터는 단계가 이전 순서와 비슷하게 계속됩니다.
  • 사용자가 손가락을 올리면 MSInertiaStart 이벤트가 발생하고 MSGESTURE_FLAG_INERTIA 플래그가 전달됩니다.
  • 요소가 화면에서 여전히 계속해서 이동하는 동안에는 MSGESTURE_FLAG_INERTIA 플래그가 전달되면서 MSGestureChange 요소가 계속 발생합니다.
  • 이동이 끝나면 MSGestureEnd 이벤트가 발생하고 MSGESTURE_FLAG_INERTIA와 MSGESTURE_FLAG_END라는 두 개 플래그가 detail 속성을 통해 전달됩니다.

작동하는 제스처 이벤트를 표시하는 전체 샘플 앱은 MSGesture 참조 항목을 참조하세요.

관련 항목

제스처 이벤트
포인터 이벤트

 

 

표시:
© 2014 Microsoft