JS: How does event.touches property work?

Question

I don't understand how to use the event.touches property. For example to get the number of fingers on a iPad/iPhone you should use

event.touches.length

Then why is this example code not working?

$('.image').bind('touchstart', function(event) {
  alert(event.touches.length);
});

But this is working:

$('.image').bind('touchstart', function() {
  alert(event.touches.length);
});

Shouldn't it be the other way round?

Answer 1

In the second case, you're falling back on the browser's global (and raw) event object rather than the jQuery-specific one (on browsers that support a global event, not all do — Firefox doesn't, for instance — because it's a Microsoft thing only some others have copied).

It sounds like jQuery isn't passing the touches property on in its custom event object. As described in the event object's documentation, you can use event.originalEvent in your first example to access the "special properties" it has while still getting the benefits of the jQuery normalized event object, e.g.:

$('.image').bind('touchstart', function(event) {
  alert(event.originalEvent.touches.length);
});

...or you can tell jQuery to copy that property over by doing this once at the beginning of your script:

jQuery.event.props.push("touches");

...whereupon your first example should start working.

---

Side note: If you're not using jQuery Touch, you might look at it. My guess is that in addition to the other things it does, it adds the touches property as shown above (but that's just a guess).