How do I the get touched coordinates using the xui library

Question

How do I get the coordinates that the user touches? I am using xui and Javascript.

On my index.html I do not know how to get the x and y coordinates from a user interaction.

Answer 1

if you use xui for event binding then the event callback function gets TocuhEvent object (e) as its parameter

x$('.a_button').on('touchstart', function(e) {
    // whatever
});

Now TouchEvent isn't like MouseEvent where you can have only one input at a time - as TouchEvent object handles multitouch multiple touches at the same time.

To get the touch that was captured on your element you have to get it from e.touches - which is all touches currently active on the device, e.targetTouches - all the touches which are on the current target .a_button in our example or e.changedTouches - touches which triggered the event. For touchstart (best responsiveness) you can grab first element of e.changedTouches as it will be the touch that triggered your touchstart event to get the Touch object representing your touch.

Now Touch object holds all the data you need to get any info on what's happening on the screen.

x$('.a_button').on('touchstart', function(e) {
    var touch = e.changedTouches[0];
    alert(touch.pageX + ' ' + touch.pageY);
});