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

javascript jquery events click touch

106,028

Solution 1

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

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

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

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.

View more solutions

106,028

waxical

Updated on July 08, 2022

Comments

waxical almost 2 years
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.
- waxical over 13 years
  
  I found this for those who are needing help on this:- stackoverflow.com/questions/3183872/… It also works on touchstart.
SteveLacy over 10 years

You have a missing ending parentheses at the end, it should be: })
mkoistinen over 10 years

Right you are. Surprised no one has noticed for 2 years! =) Thanks!
andrewb over 10 years

Unfortunately didn't work for me, I ended up having to get the x and y on the first touchmove.
matewka about 10 years

@andrewb, add e.preventDefault() in touchstart event handler.
Griffin about 10 years

There's no need to check the event type because e.pageX will be undefined for touch events. Just do out.x = e.pageX || e.originalEvent.touches[0].pageX;
sradforth about 9 years

Before returning out I add this part to get the percentage location based on the parent element in case it helps anyone... var offsetParent = e.target.offsetParent; var parentLeft = e.target.offsetParent.offsetLeft; out.percentX = (out.x - offsetParent.offsetLeft ) / offsetParent.offsetWidth; out.percentY = (out.y - offsetParent.offsetTop ) / offsetParent.offsetHeight; return out;
Jayant Varshney over 8 years

Thanks buddy. Well e.touches[0].pageX; worked for me
MartianMartian over 7 years

this works fine for all javascript based codes. screw jquery
gil9red almost 6 years

if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){ -> if (e.type.startsWith("touch")) ?
Tibix over 5 years

My saviour! Works perfectly even for touchmove().
MSC about 5 years

@Griffin - I think the problem with your suggestion is that on desktop, when the mouse is on the left edge of the document, the first branch of your statement will yield 0, which is interpreted as false, and then the browser errors because touches is undefined on the second branch. Agree?