touchend event properties

If I catch all touchend events from mobile devices with:

$(document.body).bind('touchend', function (e) {
var touch = e.touches[0]; // doesnt work
...

I need to get the touch.screenX, touch.screenY, touch.clientX and touch.clientX from the e paramter. All the examples I've seen suggest that e.touches will be a collection, and you can get at the touch details with e.touches[0]. In my tests on an ipad, e.touches is always undefined. I'm not using any jquery plugins.

Also tried e.targetTouches, which is also undefined.

Can anyone help?

Actually, released touches will be found in the changedTouches array, ie:

e.changedTouches[0].pageX // get the end x page coordinate for a released touch

I think this is slightly more reliable than going through the originalEvent property.

You can read more on changedTouches here: http://www.w3.org/TR/touch-events/#changedtouches-of-a-touchevent

The touches property is an TouchList object. You can see the TouchList class reference here.

If you monitor its length property with this example code on #log div:

$('#element').bind('touchstart', function(event) 
{
    $('#log').append(event.originalEvent.touches.length+'<br/>');
});

$('#element').bind('touchmove', function(event) 
{
    $('#log').append(event.originalEvent.touches.length+'<br/>');
});

$('#element').bind('touchend', function(event) 
{
	$('#log').append(event.originalEvent.touches.length+'<br/>');
});

you will obtain 1 while executing touchstart and touchmove, an 0 when executing touchend. That is why you obtain undefined from e.touches[0].