Марина Степанова "Работа с pointer-событиями в ie10 на...
DESCRIPTION
С выходом планшетов на Windows8 практически любому JavaScript-разработчику придется рано или поздно адаптировать свой сайт под новую систему событий IE10. API Яндекс.Карт уже прошел этот нелегкий путь. Было рассказано про общую концепцию MSPointerEvents, вы узнаете про инструменты для разработки и тестирования, как «скрестить ужа с ежом» (переписать свой код под IE10), были раскрыты особенности разработки под IE10 на конкретных примерах кода.TRANSCRIPT
2
3
4
5
6
7
8
9
─
─
─
─
11
•
•
•
•
•
12
•
•
•
•
•
•
•
•
13
function onPointerDown (event) { if (!gesture) { gesture = new MSGesture(); gesture.target = targetElement; } gesture.addPointer(event.pointerId); }
15
─
─
─
16
─
─
─
─
17
18
20
─
─
─
21
22
─
─
23
24
if (window.navigator.msPointerEnabled) {
// Pointer events are supported.
}
26
touchstart
touchmove
touchend
27
28
29
30
31
32
33
─
─
─
34
35
document.addEventListener('MSPointerDown', onPointerDown, true);
document.addEventListener('MSLostPointerCapture', onPointerEnd, true);
document.addEventListener('MSPointerUp', onPointerEnd, true);
document.addEventListener('MSPointerCancel', onPointerEnd, true);
document.addEventListener('MSPointerOut', onPointerEnd, true);
function onPointerDown (e) {
touches.push(e);
pointerNumber++;
}
function onPointerEnd (e) {
if (inTouches(e)) {
removeByPointerId(e.pointerId);
pointerNumber--;
}
36
function inTouches (e) {
var pointerId = e.pointerId;
for (var i = 0, l = touches.length; i < l; i++) {
if (touches[i].pointerId == pointerId) {
return true;
}
}
return false;
}
function removeByPointerId (pointerId) {
for (var i = 0, l = touches.length; i < l; i++) {
if (touches[i].pointerId == pointerId) {
touches.splice(i, 1);
return;
}
}
}
37
─
38
function onPointerDown (event) { if (!gesture) { gesture = new MSGesture(); gesture.target = targetElement; } gesture.addPointer(event.pointerId); }
39
var gestures = {}; function onPointerDown (event) { var pointerType = event.pointerType;
if (!gestures[pointerType]) { gestures[pointerType] = new MSGesture(); gestures[pointerType].target = targetElement; } gestures[pointerType].addPointer(event.pointerId); }
40
41
42
43
Div №1 Div №2
44
Div
45
Div
46
47
─
─
─
49
─
─
─
50
─
51
