Указатель событий IE11/Surface

Question

Каков наилучший способ обработки событий touch/pointer на планшете? Я считаю его поведение довольно запутанным. я написал скрипт, который просто установить все обработчик событий, чтобы выяснить, как события запускаются (настройка нативных обработчиков событий, с помощью JQuery для пользовательского интерфейса):

$.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); 
}); 

Использования коврика или настольного компьютера IE11, все нормально , Все три события (мышь, указатель, MSPointer) запускаются в ожидаемом порядке: вниз, перемещаться, вверх.

Но, когда я использую Параметры экрана

• сначала pointermove пожаров, то указатель вниз. На экране вокруг моего пальца появляется прямоугольник.
• повторяющихся события перемещаются обстреливают, а не перемещения пальца
• не стреляя никаких дальнейших событий, когда я двигаю мой палец событие
• pointerend при удалении пальца

Что я делаю неправильно? Вызов preventDefault, stopPropagation или stopImmediatePropagation не изменяет это поведение. Установка css pointer-events: none; отключает все события.

Complete script on codepen

Answer 1

Попробуйте мой сенсорный жест библиотека абстракции, DeepTissue. Сенсорная модель IE чрезвычайно просто потому, что события указателя абстрагируют все входные модальности в общий API. Chrome усложняет ситуацию, но это еще одна история :).

Вы действительно не хотите подключаться ко всем событиям. Я понимаю, что это будет путать. Вот почему я написал Deeptissue. Это мешает вам писать весь сантехнический код, и он выбирает лучший вариант и перехватывает этот набор событий.

Answer 2

Чтобы избежать эффекта панорамирования и масштабирования браузера, вам необходимо использовать свойство CSS touch-action, когда пользователь перетаскивает его по экрану пальцем или стилусом.

Например:

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