Is there an equivalent to e.PageX position for 'touchstart' event as there is for click event?

JavascriptJqueryEventsClickTouch

Javascript Problem Overview


I'm trying to get the X position with jQuery of a touchstart event, used with the live function?

I.e.

$('#box').live('touchstart', function(e) { var xPos = e.PageX; } );

Now, this does work with 'click' as the event. How on earth (without using the alpha jQuery Mobile) do I get it with a touch event?

Any ideas?

Thanks for any help.

Javascript Solutions


Solution 1 - Javascript

Kinda late, but you need to access the original event, not the jQuery massaged one. Also, since these are multi-touch events, other changes need to be made:

$('#box').live('touchstart', function(e) {
  var xPos = e.originalEvent.touches[0].pageX;
});

If you want other fingers, you can find them in other indices of the touches list.

UPDATE FOR NEWER JQUERY:

$(document).on('touchstart', '#box', function(e) {
  var xPos = e.originalEvent.touches[0].pageX;
});

Solution 2 - Javascript

I use this simple function for JQuery based project

    var pointerEventToXY = function(e){
      var out = {x:0, y:0};
      if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
        out.x = touch.pageX;
        out.y = touch.pageY;
      } else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') {
        out.x = e.pageX;
        out.y = e.pageY;
      }
      return out;
    };

example:

$('a').on('mousedown touchstart', function(e){
  console.log(pointerEventToXY(e)); // will return obj ..kind of {x:20,y:40}
})

hope this will be usefull for you ;)

Solution 3 - Javascript

I tried some of the other answers here, but originalEvent was also undefined. Upon inspection, found a TouchList classed property (as suggested by another poster) and managed to get to pageX/Y this way:

var x = e.changedTouches[0].pageX;

Solution 4 - Javascript

If you're not using jQuery... you need to access one of the event's TouchLists to get a Touch object which has pageX/Y clientX/Y etc.

Here are links to the relevant docs:

I'm using e.targetTouches[0].pageX in my case.

Solution 5 - Javascript

Check Safari developer reference on Touch class.

According to this, pageX/Y should be available - maybe you should check spelling? make sure it's pageX and not PageX

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionwaxicalView Question on Stackoverflow
Solution 1 - JavascriptmkoistinenView Answer on Stackoverflow
Solution 2 - JavascriptNedudiView Answer on Stackoverflow
Solution 3 - Javascriptmatt.chatterleyView Answer on Stackoverflow
Solution 4 - JavascriptScott JungwirthView Answer on Stackoverflow
Solution 5 - JavascriptTom TuView Answer on Stackoverflow