Space between touch points on IE10

Question

I'm working on the plugin flot.touch.js which add touch interactivity (pan and zoom) on the chart for webkit browsers. I want to make it work on IE10 too but I don't know how to retrieve the space between my touch points (I need this for calculate the scale).

On webkit browsers, we can do this by using these variables :

evt.originalEvent.touches[0].pageX
evt.originalEvent.touches[0].pagey
evt.originalEvent.touches[1].pageX
evt.originalEvent.touches[1].pageY

Answer 1

With IE's pointer events, a separate event is fired for each touch point. Unlike iOS touch events (as implemented by other browsers too), the state of each "pointer" is tracked separately. Consider it a more generic event that groups several pointer-based input devices.

Each event object is given a pointerId property that can be used to track its state. To track multiple touches, you'll need to store that pointerId along with any other variables in an object outside the scope of the event handler's function, along with any other data you might need. For example:

var pointers = {};
function pointerDown(evt) {
    if (evt.preventManipulation)
        evt.preventManipulation();

    pointers[evt.pointerId] = [evt.PageX, evt.PageY];

    for (var k in pointers) {
        // loop over your other active pointers
    }
}
function pointerUp(evt) {
    delete pointers[evt.pointerId];
}

Further reading:

• IEBlog - Handling Multi-touch and Mouse Input in All Browsers

Answer 2

Like Andy E said. Track how many pointers you have on your screen and store properties from each of them (in your case x and y coordinates, acquired form event)

A nice example of multitouch can be found here: http://ie.microsoft.com/testdrive/Graphics/TouchEffects/ and you can go into the code with F12 tools and get all the code under the Script tag: http://ie.microsoft.com/testdrive/Graphics/TouchEffects/Demo.js

There you can find this part of code:

function addTouchPoint(e) {
    if(touchCount == 0) {
        document.addEventListener(moveevent, moveTouchPoint, false);
    }

    var pID = e.pointerId || 0;
    if(!touchPoints[pID]) {
        touchCount++;
        touchPoints[pID] = {x : e.clientX, y : e.clientY};
    }
}

Hope it helps