digitorum.ru

Как меня найти

Профиль

icq: 4415944

Touch events in Internet Explorer 10 (События указателя и жестов в Internet Explorer 10)

ie, javascript

Возникла необходимость поработать с 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;
	});
	
})();