Question

I’m using jGesture jquery library for gesture events. As per the documentation, delta and direction are not available for gesture events.
http://jgestures.codeplex.com/documentation

$('body').bind('pinchopen pinchclose', function(el, ev) {
   if (ev.description === 'pinch:+1:open') {
      alert('pinchopen');
   } else if (ev.description === 'pinch:-1:close') {
      alert('pinchclose');
   }
});

I tried to use touchstart event to track the pageX and pageY once the figure is touched and use those coordinates in pinchopen/close events but these events does not invoke at the same time sometimes. Is there any other way?

Answer 1

I figured out the workaround on this problem by storing the X & Y coordinates in TouchStart event in a global variable and used it in pinchopen/close events.

window.PageX = 0;
window.PageY = 0;

$('#mainContainer').bind('swipemove', function(event){ event.preventDefault();});
$('#mainContainer').bind('pinchopen pinchclose', function(el, ev) {
    if (ev.description === 'pinch:+1:open') {
       alert('pinchopen' + window.PageX);
    } else if (ev.description === 'pinch:-1:close') {
       alert('pinchclose' + window.PageY);
    }
});

document.getElementById('mainContainer').addEventListener('touchstart', function(e) {
    window.PageX = e.changedTouches[0].pageX;
    window.PageY = e.changedTouches[0].pageY;
}, false);