3

I am having problem with using pointer and gesture events on windows 8.

The problem is that I am not able to detect any finger/gesture movement on my website through Javascript. I did follow the instruction from Microsoft: http://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx.

However, it looks like even the simplest function window.navigator.msPointerEnabled returns either null or false when it should return a true (since I am using a Windows 8 tablet that is touch-enabled).

Does anyone have the same issue before? If so, how did you fix this problem?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
DLee
  • 300
  • 3
  • 14
  • 1
    Update: it turns out that if I create a new MVC3 project in VS2010 in Windows 8 OS, seems like the pointer can be detected. However, if the project is created in Windows 7, then it will not work. This is so strange... – DLee Nov 19 '12 at 20:38

2 Answers2

0
The following example is a basic paint application that works with mouse, touch, and pen via pointer events.

<style>
  html { 
    -ms-touch-action: none; /* Shunt all pointer events to JavaScript code. */
  }
</style>
<canvas id="drawSurface" width="500px" height="500px" style="border:1px solid black;"></canvas>
<script type='text/javascript'>
window.addEventListener('load', function() {
  var canvas = document.getElementById("drawSurface"),
  context = canvas.getContext("2d");
  if (window.navigator.msPointerEnabled) {
    canvas.addEventListener("MSPointerMove", paint, false);
  } 
  else {
    canvas.addEventListener("mousemove", paint, false);
  }
  function paint(event) {
    context.fillRect(event.clientX, event.clientY, 5, 5);
  }
});
</script>

For more details checkout this link

riti
  • 255
  • 2
  • 11
  • Thanks for the response. But what I am asking is: why do I get "window.navigator.msPointerEnabled" as "undefined" when it should be "true"? – DLee Nov 05 '12 at 05:06
0

In addition to the usual stuff (correct doctype and meta tag) you must set -ms-touch-action:none; on the html and or body element in css:

html, body {
 -ms-touch-action: none;
}

Edit: (MSGestureChange provides a complete html sample)

Community
  • 1
  • 1
terphi
  • 781
  • 7
  • 18