Unable to get the properties of touchstart event?

Question

When I try to implement the below code:

$('.touchelement').bind({'touchstart':function(e){
    console.info(e.touches.item(0));
}});

It shows the output as undefined. Not only in touchstart, but for every other event like (touchmove, touchend) it shows the same result.

Is there is any alternate way to bind the touchstart event using jQuery.

Answer 1

jQuery does some processing on event objects to make them consistent across browsers, but it doesn't know about the touches array so this isn't copied to the new event object. So, you need to access it through the original event object which is event.originalEvent.

$('.touchelement').bind({'touchstart':function(e){
  console.info(e.originalEvent.touches[0]);
}});