title: jQuery (Swipe vs. Touch) pageX and pageY keep returning 0
body: <p>I'm playing with touchstart and touchend events on my iPhone. I built a sample page that has div that if you touch it and scroll the page, it should return the y coordinates of the start and end positions. </p>
  
  <p>link: <a href="http://jsbin.com/ibemom/2" rel="noreferrer">http://jsbin.com/ibemom/2</a></p>
  
  <p>the jQuery:</p>
  
  <pre><code>var touchStartPos;
  
  $('.theDiv')
    .bind('touchstart', function(e){
      touchStartPos = e.pageY;
    })
    .bind('touchend', function(e){
      alert(touchStartPos + ' | ' + e.pageY)
    })   
  </code></pre>
  
  <p>When I load that page on my iPhone, however, the alert keeps reporting both values as zero. Anyone see anything wrong with what I have?</p>
  
  <p>UPDATE:</p>
  
  <p>I stumbled across this bit of code in the jQuery Mobile project: <a href="https://github.com/jquery/jquery-mobile/issues/734" rel="noreferrer">https://github.com/jquery/jquery-mobile/issues/734</a> </p>
  
  <p>A comment it from it stuck out:</p>
  
  <pre><code> // (in iOS event.pageX and event.pageY are always 0 )
  </code></pre>
  
  <p>It doesn't say <em>why</em> that's the case, but at least I found someone else that sees the same thing. Will dig through the sample code on that page to see if the solution is there. </p>
  
  <p>UPDATE II: </p>
  
  <p>Well, after looking through the sample code in the link above, it looks like this will return an actual value:</p>
  
  <pre><code>e.originalEvent.touches[0].pageY
  </code></pre>
  
  <p>The catch is, I now realize that's not quite I need. It's returning the Y offset of the area I touched within the object I attached the event to IN RELATION TO THE HTML DOCUMENT...rather than the browser window. </p>
  
  <p>My goal is to figure out where on the screen the touch started, and where it ended...and then compare the values. If they are quite a bit different, then we assue a swipe was performed...rather than a touch. </p>
  
  <p>UPDATE III:</p>
  
  <p>I'm also finding references to these examples:</p>
  
  <pre><code>e.originalEvent.touches[0].pageX
  
  event.targetTouches[0].pageY
  </code></pre>
  
  <p>Though I can't seem to get those to work either. Both return undefined errors. </p>
  
  <p>UPDATE IV: </p>
  
  <p>It looks like one solution is to track offset() on the document itself. I can apply a touchend event to the document, and then check it's offset.</p>
  
  <p>The problem with this is that my touchend event will first trigger on the element on my page and THEN it'll fire it on the document (bubbling). So I can't actually determine if it was a touch or swipe BEFORE I need to figure out what to do on the objects touchend event. </p>
  
  <p>Still pondering this one...</p>