적응 입력 처리를 위한 기능

Internet Explorer 10의 포인터 이벤트 모델을 사용하면 단일 이벤트 집합에 기록하여 모든 마우스, 펜, 터치 및 멀티 터치 입력을 처리할 수 있습니다. 마우스 이벤트와 마찬가지로, 포인터 이벤트는 각 포인터의 down, move, up, over 및 out에서 발생합니다. 대부분의 사이트에서 기본 터치 지원은 다음과 같은 여러 가지 이유로 필요한 별도의 변경 없이 "작동해야" 합니다.

  • Internet Explorer 10은 스크롤 가능 영역에 대한 이동, 두 번 누르기 및 손가락 모으기로 확대/축소, 터치 선택 및 컨텍스트 메뉴 길게 누르기 같은 기본 터치 조작에 대한 공통 기본 처리를 제공합니다. 이러한 기능은 자동으로 작동하므로 사이트와 앱에 기본적으로 우수한 터치 환경이 제공됩니다.
  • 포인터 이벤트가 발생한 후 Internet Explorer 10에서는 주 접촉(예: 화면의 첫 번째 손가락)에 대해 마우스 이벤트를 발생시킵니다. 그러면 마우스 이벤트를 기반으로 하는 기존 웹 사이트가 계속 작동할 수 있습니다.

기본적인 터치 지원 디자인 전략 및 문제 해결을 위해서는 빠른 시작: 터치 사용이 가능한 사이트 구현(영문)을 참조하세요. 마우스 및 키보드 지원은 계속 원활하게 제공하면서 터치 사용을 위한 사이트 최적화 준비가 완료되면 Internet Explorer 10에서는 이 문서에 설명되어 있는 적응 입력 처리를 위한 기능을 제공합니다.

터치 감지

Internet Explorer 10은 msMaxTouchPoints 속성을 제공하여 클라이언트 쪽에서 터치 및 멀티 터치 하드웨어 지원을 확인합니다.


if (navigator.msMaxTouchPoints > 1) {
  // Supports multi-touch
}

서버 쪽에서 터치 기능을 감지하기 위해, Internet Explorer 10은 사용자 에이전트 문자열 "Touch" 토큰을 제공합니다. 터치 지원이 확인된 후 MSPointerDown 이벤트의 pointerType을 확인하여 사용자가 터치를 사용 중인 때를 감지할 수 있습니다.


element.addEventListener("MSPointerDown",handleDown,false);
function handleDown(event) {
  if(event.pointerType == event.MSPOINTER_TYPE_TOUCH) {
    // Do something for touch input only
  }else{
    // Do something for non-touch input
  }
}

터치 사용을 위한 마우스 가리키기 시뮬레이션

터치 기반 검색에서는 커서로 웹 페이지 요소를 가리키는 것에 해당하는 동작이 없습니다. 따라서 터치 기반 사용자는 가리키기에 의해 활성화되는 동작이나 콘텐츠는 잠재적으로 사용할 수 없습니다. 이 문제가 발생할 수 있는 일반적인 시나리오는 가리키기로 활성화되는 하위 메뉴입니다. 이 문제를 방지하는 가장 좋은 방법은 가리키기를 통해 사용자가 조작할 수 있는 콘텐츠를 숨기지 않는 것입니다. 대신 onclick 이벤트를 사용하여 표시 유형을 전환합니다. Internet Explorer 10은 기존 aria-haspopup 속성에 새 동작을 추가하여 숨겨진 대화형 콘텐츠가 있는 페이지 요소에서 가리키기를 시뮬레이션합니다.


<style type="text/css">
#menu .cssSubMenu {
  display: none;
}
#menu:hover .cssSubMenu {
  display: block;
}
</style>

...
<div id="menu" aria-haspopup="true">
  <a>CSS Hover Menu</a>
    <div aria-haspopup="false" class="cssSubMenu">
      <a>Sub menu item 1</a> </div>
    <div aria-haspopup="false" class="cssSubMenu">
      <a>Sub menu item 2</a> </div>
    <div aria-haspopup="false" class="cssSubMenu">
      <a class="cssSubLink">Sub menu item 3</a> </div>
</div>


자세한 내용은 aria-haspopup을 사용하여 터치 사용 장치에서 가리키기 시뮬레이션을 참조하세요.

터치 동작 지정 및 다시 정의

기본적으로 Internet Explorer 10에서는 터치 이동, 손가락 모으기, 두 번 누르기를 사용하며 이러한 조작에 대해 이벤트를 전송하지 않습니다. -ms-touch-action CSS 스타일 시트 속성을 사용하여 이러한 기본 설정을 다시 정의하고 사이트에서 허용되는 터치 동작을 지정할 수 있습니다. 다음 표에서는 가능한 값에 대해 설명합니다.

설명

auto

초기값입니다. 브라우저에서 요소에 대한 동작을 확인합니다.

none

요소가 기본 터치 동작을 허용하지 않습니다.

pan-x

요소가 가로 축에서 터치로 구동되는 이동을 허용합니다.

pan-y

요소가 세로 축에서 터치로 구동되는 이동을 허용합니다.

pinch-zoom

요소가 손가락 모으기로 확대/축소를 허용합니다.

manipulation

요소가 터치로 구동되는 이동 및 손가락 모으기로 확대/축소를 허용합니다. ("pan-x pan-y pinch-zoom"의 단축형 동작에 해당)

double-tap-zoom

요소가 두 번 눌러 확대/축소를 허용합니다.

inherit

요소가 상위 요소로부터 -ms-touch-action의 값을 상속합니다.

 

터치 사용 요소 확대/축소 및 이동/스크롤을 세부적으로 제어할 수 있도록 확대/축소 및 스크롤 한계를 설정하고, 확대/축소 및 스크롤 끌기 지점을 설정하고, 이동 동작의 축을 고정하거나 자유 형식의 이동을 허용하는 등의 작업을 가능하게 하는 여러 가지 새로운 속성이 있습니다. 그리고 페이지에서 선택 가능한 요소를 제어하기 위해, 모든 입력 유형에 대해 동일한 작업을 수행하는 -ms-user-select를 사용할 수 있습니다.

개발자 가이드 이동 및 확대/축소, 선택 가능한 텍스트 지정
샘플터치 입력을 사용하여 스크롤, 이동 및 확대/축소, CSS 사용자 선택 샘플
참조 터치: 확대/축소 및 이동, -ms-user-select

 

포인터 이벤트 모델

Internet Explorer 10에서는 포인터라고 하는 추상화된 형태의 모든 마우스, 펜, 터치 및 멀티 터치 입력을 쉽게 처리할 수 있는 포인터 이벤트 모델을 제공합니다. 일반적인 포인터 입력을 캡처하는 이벤트와 해당 이벤트의 속성은 마우스에 사용했던 것(down, move, up, over 및 out)과 아주 유사하며, 여기에 다른 입력 형태 및 다중 포인터에 유용한 기능이 추가되었습니다. 다른 브라우저에서 멀티 터치 및 마우스 입력 처리에 대한 제안 사항은 IEBlog를 참조하세요.

포인터 이벤트 모델을 설명하는 개념 다이어그램: 3개의 공("펜," "터치" 및 "마우스")이 깔때기에 들어가면 아래로 "포인터"가 나옵니다.
개발자 가이드 포인터 및 제스처 이벤트
데모 Touch Effects, Lasso Birds, Love is in the Air, Irish Spring
샘플 Canvas, SVG 및 멀티 터치를 사용하여 타일식 퍼즐 게임을 만드는 방법
참조 이벤트

 

제스처 이벤트 모델

보다 고급 터치 환경을 빌드하기 위해, Internet Explorer 10에서는 더 복잡한 사용자 조장을 처리할 수 있는 제스처 이벤트 모델을 제공합니다.

개발자 가이드 포인터 및 제스처 이벤트
데모Browser Surface, Touch Effects, Lasso Birds, Love is in the Air, Irish Spring
샘플 Canvas, SVG 및 멀티 터치를 사용하여 타일식 퍼즐 게임을 만드는 방법
참조 이벤트

 

터치 지원 HTML5 양식

Internet Explorer 10에서는 터치에 최적화된 HTML5 입력 컨트롤을 지원합니다. 다음은 향상된 터치 기능의 일부입니다.

  • 모든 옵션에서 컨트롤 carousel 선택, 연속 스크롤 허용
  • 텍스트 입력 상자에 모두 지우기 단추 제공
  • 페이지의 스크롤 가능 하위 영역을 터치로 작동
  • 범위 컨트롤에서 선택한 값에 대한 연속 피드백 제공
  • 단추 및 링크는 대상을 이동하여 터치로 클릭 취소 가능
  • 라디오 단추 및 확인란은 터치로 손쉽게 선택 가능, 또한 레이블을 터치해서도 활성화 가능
  • 도구 설명은 링크를 터치할 때가 마우스를 사용할 때보다 더 크고 더 멀리 있습니다.

텍스트 입력의 경우 전자 메일, 전화 또는 URL 등의 특정 입력 유형을 식별하여 사용자의 터치 환경을 더욱 향상할 수 있습니다. Internet Explorer 10은 Windows 8에서 해당 입력 유형에 대한 맞춤식 터치 키보드 레이아웃을 표시합니다.—

개발자 가이드 HTML5 양식
데모터치 중심 컨트롤
샘플폼 컨트롤 샘플

 

관련 항목

적응 웹 사이트 디자인
적응 레이아웃의 기능

 

 

표시:
© 2014 Microsoft