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