С выходом планшетов на Windows8 практически любому JavaScript-разработчику придется рано или поздно адаптировать свой сайт под новую систему событий IE10. API Яндекс.Карт уже прошел этот нелегкий путь. Было рассказано про общую концепцию MSPointerEvents, вы узнаете про инструменты для разработки и тестирования, как «скрестить ужа с ежом» (переписать свой код под IE10), были раскрыты особенности разработки под IE10 на конкретных примерах кода.

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9
─
─
─
─

11. 11
•
•
•
•
•

12. 12
•
•
•
•
•
•
•
•

13. 13
function onPointerDown (event) {
if (!gesture) {
gesture = new MSGesture();
gesture.target = targetElement;
}
gesture.addPointer(event.pointerId);
}

15. 15
─
─
─

16. 16
─
─
─
─

17. 17

18. 18

20. 20
─
─
─

21. 21

22. 22
─
─

23. 23

24. 24
if (window.navigator.msPointerEnabled) {
// Pointer events are supported.
}

26. 26
touchstart
touchmove
touchend

27. 27

28. 28

29. 29

30. 30

31. 31

32. 32

33. 33
─
─
─

34. 34

35. 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. 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. 37
─

38. 38
function onPointerDown (event) {
if (!gesture) {
gesture = new MSGesture();
gesture.target = targetElement;
}
gesture.addPointer(event.pointerId);
}

39. 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. 40

41. 41

42. 42

43. 43
Div №1 Div №2

44. 44
Div

45. 45
Div

46. 46

47. 47
─
─
─

49. 49
─
─
─

50. 50
─ 

51. 51