포인터 이벤트 IE11/Surface

Question

표면 태블릿에서 터치/포인터 이벤트를 처리하는 가장 좋은 방법은 무엇입니까? 나는 그 행동이 매우 혼란 스럽다는 것을 안다. 난 그냥 이벤트를 해고하는 방법을 알아 내기 위해 모든 이벤트 핸들러를 설정하는 스크립트 (UI의 jQuery를 사용하여, 기본 이벤트 핸들러를 설정) 쓴 다음 마우스 패드 또는 데스크탑 IE11을 사용

$.each([ 
    "touchstart","touchmove","touchend", 
    "mousedown","mousemove","mouseup", 
    "pointerdown","pointermove","pointerup", 
    "MSPointerDown","MSPointerMove","MSPointerUp" 
], function(i,eventname) { 

    tester.addEventListener(this, function(e) { 
     msg(eventname,e); 
     if ($("#prevent").is(":checked")) { 
      e.preventDefault(); 
     } 
     if ($("#stop").is(":checked")) { 
      e.stopPropagation(); 
     } 
     if ($("#stopimmediate").is(":checked")) { 
      e.stopImmediatePropagation(); 
     } 

    }, false); 
}); 

을, 모든 것이 괜찮습니다 . 세 가지 이벤트 (마우스, 포인터, MSPointer)가 예상 된 순서대로 작동합니다 (아래, 위로, 위로).

하지만, 내가 먼저 pointermove 화재에 tochscreen

• 를 사용하는 경우, 다음 아래로 포인터. 화면에 내 손가락 주위에 직사각형이 나타납니다. 하지 내 손가락
• 더 이상 이벤트를 발사하지를 이동하면서 움직일 때 손가락 내가 잘못 뭐하는 거지

을 제거 할 때

반복 이동 이벤트는 손가락

pointerend 이벤트를 발사된다? preventDefault, stopPropagation 또는 stopImmediatePropagation을 호출해도이 동작은 변경되지 않습니다. CSS를 설정 포인터 이벤트 : 없음;은 모든 이벤트를 비활성화합니다.

Complete script on codepen

Answer 1

는 DeepTissue, 내 터치 제스처 추상화 라이브러리를 사용해보십시오. IE의 터치 모델은 포인터 이벤트가 모든 입력 양식을 공통 API로 추상화하기 때문에 매우 간단합니다. Chrome은 상황을 복잡하게 만들지 만 또 다른 이야기입니다. :)

정말 모든 이벤트에 연결하고 싶지 않습니다. 나는 그것이 혼란 스러울 것이라고 생각한다. 그래서 내가 Deeptissue를 썼다. 그것은 모든 배관 코드를 작성하지 않아도되며 최상의 옵션을 선택하고 해당 이벤트 세트에 연결됩니다.

Answer 2

사용자가 손가락이나 스타일러스를 사용하여 화면을 가로 질러 드래그 할 때 브라우저의 이동 및 확대/축소 동작을 방지하려면 touch-action CSS 속성을 사용해야합니다. 예를 들어

:

#prevent, #stop, #stopimmediate { 
    touch-action: none; 
}