Возникла необходимость поработать с IE10 на тач-устройстве.
И все бы хорошо, но IE "think different".
Для нормальной работы на тач-скрине нам придется слушать события MSPointer* и MSGesture* (тут очень неплохой "how to").
Предположим есть "каруселька":
На корневой элемент (.root) мы будем вешать "прослушку" событий.
Сразу необходимо оговорить то, что для корневого элемента необходимо прописать стиль:
.root {
-ms-touch-action: none;
}
Подробнее тут (и о депрекейте этой конструкции в будущем ).
Собственно псевдокод, как всем этим пользоваться (особое внимание к "NEED-TO-DO!"):
(function() {
// "корневой" элемент
var rootElement = $('.root');
// флаг "схвачен ли элемент"
var dragged = false;
// позиция мыши в момент "захвата" карусели
var draggedMousePosition = -1;
// насколько была прокручена карусель в момент "захвата"
var draggedCarouselloShift = 0;
// Объект MSGesture, который и содержит в себе реализацию всех необходимых "жестов" (IE10+)
// NEED-TO-DO!
var gesture = ( typeof MSGesture !== 'undefined' ) ? new MSGesture() : false;
/*
* получить позицию мыши/пальца
*/
function getMousePos(e) {
switch(e.type) {
case 'MSGestureChange' :
case 'MSPointerDown' :
return e.originalEvent.clientX;
break
case 'touchmove' :
case 'touchstart' :
return e.originalEvent.touches[0].pageX;
break;
default :
return e.pageX ? e.pageX : e.clientX;
break;
}
return 0;
}
/*
* получить смещение карусели (то, на сколько она прокручена)
*/
function getShift() { }
/*
* возможен ли сдвиг карусели
*/
function canSlide(left) { }
/*
* прокрутка карусели
*/
function move(left) { }
// задаем элемнт, для которого нужно отслеживать "жесты"
// NEED-TO-DO!
gesture.target = rootElement[0];
// захват карусели
rootElement.on('MSPointerDown touchstart mousedown', function(e) {
dragged = true;
draggedMousePosition = getMousePos(e);
draggedCarouselloShift = getShift();
if(e.type == 'MSPointerDown' && gesture) {
// указываем поинтер, с которым будем работать
// NEED-TO-DO!
gesture.addPointer(e.originalEvent.pointerId);
}
return false;
});
// сброс "захвата"
rootElement.on('MSGestureEnd touchend mouseup', function(e) {
if(dragged) {
dragged = false;
draggedMousePosition = -1;
draggedCarouselloShift = 0;
}
return false;
});
// пережвижение карусели
rootElement.on('MSGestureChange touchmove mousemove', function(e) {
var left = 0;
if(dragged) {
left = draggedCarouselloShift - (draggedMousePosition - getMousePos(e));
if(canSlide(left)) {
move(left);
}
};
return false;
});
// если вышли за пределы карусели - бросаем ее
$(document).on('mousemove', function() {
dragged = false;
});
})();