How to get the touch co-ordinates in android+phonegap environment?

Question

Platform target - android 4.0 and above.

Environment - html5+css3+javascript using phonegap

In my app under above environment, I want a popup menu which is nothing but a <div>, to appear, exactly few pixels above a button's top when user touches it. Till now I've worked out upto this:

<head>
<script type="text/javascript" charset="utf-8">

         var touchme=document.getElementById('#button');
         function onDeviceReady(){

                   touchme.addEventListener('touchstart',onNav, false);
         }
         function onNav() {

                popup=document.querySelector("#divPop");
                popup.style.display="block"; //this will make a popup appear
                touchme.getBoundingClientRect();
                navigator.notification.alert(touchme.top);
         }
</script>
</head>

Now problem is, even alert is not showing up. So how would I get the co-ordinates of the button?

psychobunny · Accepted Answer · 2013-04-04T05:43:58.317

3

First of all, try that code after the DOM is loaded - your script is in the <head> tag and you're attempting to access the element #button pre-emptively.

var touchme = null;
function onDeviceReady(){
    touchme = document.getElementById('#button');
    touchme.addEventListener('touchstart',onNav, false);
}

window.addEventListener("DOMContentLoaded", onDeviceReady, false);

as for the coordinates, have a look at the screenX and screenY properties of the event (which is passed in to onNav). The properties to look for are essentially identical to that of a regular mouse click.

function onNav(e) {
    alert(e.screenX + ' ' + e.screenY);
}

edited Apr 04 '13 at 05:43

answered Apr 04 '13 at 05:37

psychobunny

1,247
9
16

But I call onDeviceReady() function from onLoad() which is called by Is it same as window.addEventListener("DOMContentLoaded", onDeviceReady, false); ? – Sujit Y. Kulkarni Apr 04 '13 at 06:49
1

It is similar (see http://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events) - the body's onload event will work as well. Problem is that `var touchme=document.getElementById('#button');` is executed before #button is loaded. So move that line into the onDeviceReady function and you should be good. – psychobunny Apr 04 '13 at 07:33
hey thanks a lot. 90% good, but e.screenX didn't show anything. I'm after that now. – Sujit Y. Kulkarni Apr 04 '13 at 07:51
are you passing in the event object like so? `function onNav(e)`, alternatively you could try `e.clientX` and `e.clientY` or `e.pageX` and `e.pageY` – psychobunny Apr 04 '13 at 16:26

How to get the touch co-ordinates in android+phonegap environment?

1 Answers1

Linked