CODEWITHSUNDEEP
javascripthtmlcordovaphonegap-build
Krishnakumar_Muraleedharan
Krishnakumar_Muraleedharan

Reputation: 449

Touch is not working in PhoneGap app with 2 canvases

I am developing a space shooter in HTML5. I have two canvases as below. The one with id 'bg' is for the scrolling background(which is a randomly generated star field) and the other one 'fld' is used to draw the game objects.

<html>
  <head>
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1,maximum-scale=1,user-scalable=0">
    <link href="css/styles.css" rel="stylesheet">
    <script src="js/f-shoot.js"></script>
  </head>

  <body  onload='test()'>


    <canvas id="fld"></canvas>
    <canvas id="bg"></canvas>


  </body>
</html>

My issue is that the touch events I have binded to 'fld' does not work in the Phone Gap app. But it works perfectly in my android mobile's Chrome browser. I removed the bg canvas and tried another build and it worked perfectly. But I want multiple canvases in my game.

These are the styles (styles.css file) that I use to align the canvases one on top of another

*{
  margin:0;
  padding:0;
}

html,body
{
  width:100%;
  height:100%;
}

canvas {
  position:absolute;
  left:0;
  top:0;
  display:block;
}

#bg {
  background-color:rgb(0,0,20);
  z-index:1;
}

#fld{
  z-index:10;
}

I am attaching my events as below

var space = document.getElementById('fld');

space.ontouchstart = function(event) {

 ....


};

space.ontouchend = function(event) {

 ....

};

space.ontouchmove = function(event) {

 ....


};

I have no issues with the binding of events when I am using a single canvas. But when I include the background canvas and run the Phone Gap app, it does not respond to touch events.

What am I doing wrong here?

Upvotes: 0

Views: 77

Answers (1)

Krishnakumar_Muraleedharan
Krishnakumar_Muraleedharan

Reputation: 449

It worked after I added the following eventListener to document.body.

document.body.addEventListener('touchstart',function(event) {
 event.preventDefault();
});

Upvotes: 1

Related Questions