使用touchstart事件无法识别碰撞

Question

I am working on creating a touch enabled game using examples from the book "Foundation HTML5 Animation with JavaScript. One of the examples from the book shows basic touch functionality that works but not completely. Here is a link to the example http://jsfiddle.net/yrXCN/3/

According to the function below if you touch the canvas within the ball it should log the message "in ball: touchstart" however I have yet to make it work. It will recognize the ball when you move into it, but for some reason it wont recognize a first touch.

If I change the code to use mouse listeners it works as intended.

canvas.addEventListener('touchstart', function (event) {
    event.preventDefault();
    if (utils.containsPoint(ball.getBounds(), touch.x, touch.y)) {
      log.value = "in ball: touchstart";
    } else {
      log.value = "canvas: touchstart";
    }
  }, false);

Answer 1

 element.addEventListener('touchstart', function (event) {
    touch.isPressed = true;
    touch.event = event;
}, false);

If "touchstart" is fired on your ball touch.x and touch.y are undefined and so you do not recognize the touch on the ball. You track touch.x and touch.y in your touchmove event and that is why you recognize the touch is on the ball while moving.

Edit: You can solve this by setting touch.x and touch.y inside the touchstart event at line 88-91