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

Question

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.

I found this for those who are needing help on this:- http://stackoverflow.com/questions/3183872/does-jquery-preserve-touch-events-properties It also works on touchstart. — waxical, Jan 24 '11 at 10:42

mkoistinen · Accepted Answer · 2014-01-21T21:00:40.363

191

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;
});

edited Jan 21 '14 at 21:00

answered Aug 31 '11 at 00:07

mkoistinen

7,724
3
41
56

You have a missing ending parentheses at the end, it should be: }) – SteveLacy Sep 19 '13 at 01:54
Right you are. Surprised no one has noticed for 2 years! =) Thanks! – mkoistinen Sep 20 '13 at 22:58
Unfortunately didn't work for me, I ended up having to get the x and y on the first `touchmove`. – andrewb Jan 22 '14 at 23:20
@andrewb, add `e.preventDefault()` in `touchstart` event handler. – matewka Feb 04 '14 at 15:26
1

Thanks buddy. Well `e.touches[0].pageX;` worked for me – Jayant Varshney Nov 26 '15 at 14:51

score 48 · Answer 2 · answered Apr 29 '13 at 17:04

48

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 ;)

answered Apr 29 '13 at 17:04

Nedudi

5,639
2
42
37

15

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;` – Griffin Apr 30 '14 at 17:33
1

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; – sradforth Apr 24 '15 at 20:45
`if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){` -> `if (e.type.startsWith("touch"))` ? – gil9red Jun 29 '18 at 08:52
@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? – MSC Feb 20 '19 at 07:07

score 20 · Answer 3 · answered Nov 02 '15 at 11:16

20

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;

answered Nov 02 '15 at 11:16

matt.chatterley

344
2
7

4

this works fine for all javascript based codes. screw jquery – MartianMartian Aug 31 '16 at 15:37
2

My saviour! Works perfectly even for touchmove(). – Tibix Sep 25 '18 at 09:05

Scott Jungwirth · Answer 4 · 2016-09-05T22:52:51.847

9

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.

edited Sep 05 '16 at 22:52

answered Oct 23 '15 at 00:28

Scott Jungwirth

6,105
3
38
35

score 0 · Answer 5 · edited Dec 10 '11 at 14:40

0

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

edited Dec 10 '11 at 14:40

answered Jan 24 '11 at 16:59

Tom Tu

9,573
35
37

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

5 Answers5

Linked