댓글 : IE10의 고급 사용자 입력에 대한 새로 추가 된 인식 지원, 예를 들어보십시오. 예를 들어보십시오. 클릭 클릭 작업을 등록하면 현재 사용자의 클릭이 손가락 클릭 여부, 마우스 클릭 또는 스타일러스 클릭 여부를 알 수 있습니다 (태블릿 장치에는 스타일러스가 있습니다).
IE10 고급 사용자 입력에 대한 새로 추가 된 인식 지원 : 예 : 클릭 작업을 등록하고 문장 AddEventListener를 통해 현재 사용자의 클릭이 어떤 장치인지, 손가락 클릭, 마우스 클릭 또는 스타일러스 클릭 (태블릿 장치에 스타일러스가 있습니다)을 알 수 있습니다.
위의 코드는 현재 사용자의 클릭이 어떤 장치인지 식별 할 수 있으며 콜백 메소드 E.PointerType를 통해 판단을합니다. 마우스는 4, 스타일러스는 3이고 손가락은 2입니다. 어떤 종류의 장비가 1의 값인지는 여전히 연구해야합니다.
또 다른 점은 JavaScript에서 입력 장치의 식별을 추가하고 등록 방법 이벤트도 약간 다르다는 것입니다.
addeventListener 추가 된 이벤트는 mspointerdown입니다
IE10에서는 이러한 다양한 장치를 인식하여 선호되는 손가락 클릭이 정상 기능 클릭의 영향을받지 않습니다. 그러나 IE10은 사용자의 입력 장치를 인식 할뿐만 아니라 많은 고급 제스처를 지원합니다.
다음은 IE10 고급 제스처 지원의 데모입니다.
제스처 객체를 만듭니다
웹 사이트에서 제스처를 처리하는 첫 번째 단계는 제스처 객체를 인스턴스화하는 것입니다.
var mygesture = new msgesture ();
다음으로 제스처의 대상 요소를 제공하십시오. 브라우저는이 요소에 대한 제스처 이벤트를 트리거합니다. 동시에이 요소는 이벤트의 좌표 공간을 결정할 수도 있습니다.
elm = document.getElementById (일부 요소);
mygesture.target = elm;
Elm.AddeventListener (MSGESTURECHANGE, HANDERGESTURE);
마지막으로, 제스처 인식 중에 처리 할 포인터를 제스처 객체에 알리십시오.
elm.addeventListener (mspointerdown, function (evt) {
// 제스처 인식을 위해 현재 마우스, 펜 또는 터치 연락처 추가
mygesture.addpointer (evt.pointerid);
});
참고 : 기본 터치 동작 (예 : PAN 및 Zoom)을 수행하지 못하도록 요소를 구성하기 위해 -ms-touch- 액션을 사용해야한다는 것을 잊지 마십시오. 입력에 대한 포인터 이벤트를 제공합니다.
제스처 이벤트를 처리하십시오제스처 객체에 유효한 대상이 있고 하나 이상의 포인터가 추가되면 제스처 이벤트가 트리거됩니다. 제스처 이벤트는 정적 제스처 (예 : 클릭 또는 보유)와 동적 제스처 (예 : 수축, 회전 및 스 와이프)의 두 가지 유형으로 나눌 수 있습니다.
딸깍 하는 소리가장 기본적인 제스처 인식은 클릭입니다. 클릭이 감지되면 MSGESTURETAP 이벤트가 제스처 객체의 대상 요소에서 트리거됩니다. 클릭 이벤트와 달리, 클릭 제스처는 사용자가 터치하거나 마우스 버튼을 누르거나 스타일러스를 사용하여 움직이지 않고 터치 할 때만 트리거 될 수 있습니다. 사용자 클릭과 드래그 요소를 구별하려는 경우 일반적으로 매우 유용합니다.
긴 언론긴 프레스 제스처는 사용자가 한 손가락으로 화면을 만지고 잠시 동안 잡고 움직이지 않고 들어 올리는 것을 말합니다. 긴 프레스 상호 작용 중에 MSGESTURED 홀드 이벤트는 다양한 제스처 상태에 대해 여러 번 발사됩니다.
element.addeventListener ( "msgesturehold", heverhold);
함수 곡물 (EVT) {
if (evt.detail & evt.msgesture_flag_begin) {
// 시작은 제스처의 시작을 나타냅니다. 홀드 제스처의 경우, 이는 손가락이 들어 올리면 제스처가 완전한 프레스 및 홀드가 될 수있을 정도로 충분히 오랫동안 잡고 있었음을 의미합니다.
}
if (evt.detail & evt.msgesture_flag_end) {
// 끝은 제스처의 끝을 신호합니다.
}
if (evt.detail & evt.msgesture_flag_cancel) {
// 신호 신호 사용자가 제스처를 시작했지만 취소했습니다. 홀드의 경우, 이는 사용자가 들어 올리기 전에 드래그 할 때 발생합니다. 이 플래그는 최종 깃발과 함께 전송되어 제스처 인식이 완료되었음을 알리는 신호입니다.
}
}
동적 제스처 (수축, 회전, 스 와이프 및 드래그)
동적 제스처 (예 : 수축 또는 회전)는 CSS 2D 변환과 매우 유사한 변환 형태로보고됩니다. 동적 제스처는 MSGESTURESTART, MSGESTURECHANGE (제스처가 계속됨에 따라 반복 트리거) 및 MSGESTUREND의 세 가지 이벤트를 트리거 할 수 있습니다. 각 이벤트에는 스케일링 (수축), 회전, 변환 및 속도에 대한 정보가 포함되어 있습니다.
동적 제스처는 전환에보고되므로 CSS 2D 변환과 함께 MSRESTURE를 사용하여 사진이나 퍼즐과 같은 요소를 조작하는 것이 매우 쉽습니다. 예를 들어, 다음과 같은 방식으로 요소를 스케일링, 회전 및 드래그하는 것을 활성화 할 수 있습니다.
targetElement.addeventListener ( "MSGEGGENTURECHANGE", MANIPLEALELEMENT);
함수 조작 (e) {
// 동적 제스처 인식이 제공하는 내장 관성을 비활성화하려면 다음 코드를 무우정
// if (e.detail == e.msgesture_flag_inertia)
// 반품;
var m = 새로운 mscssmatrix (e.target.style.transform); // 요소에서 최신 CSS 변환을 가져옵니다
e.target.style.transform = m
.TransLate (e.offsetx, e.offsety) // 제스처 중심에서 변환 원점을 이동
.Rotate (e.rotation * 180 / math.pi) // 회전을 적용하십시오
.Scale (E.Scale) // 스케일을 적용합니다
.TransLate (E.TranslationX, E.Translationy) // 번역을 적용하십시오
.TransLate (-e.offsetx, -e.offsety); // 변환 원점을 다시 이동합니다
}
축소 및 회전과 같은 동적 제스처는 마우스 작업을 지원할 수 있으며, 마우스 휠을 회전시키는 동안 CTRL 또는 시프트 수정자를 각각 사용하여 달성 할 수 있습니다.