Is there an equivalent to e.PageX position for 'touchstart' event as there is for click event?
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.
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;
});
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 ;)