CODEWITHSUNDEEP
javascripthtmlcordovatouch
Sujit Y. Kulkarni
Sujit Y. Kulkarni

Reputation: 1386

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

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?

Upvotes: 0

Views: 1774

Answers (1)

psychobunny
psychobunny

Reputation: 1247

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

Upvotes: 3

Related Questions