Touch 在具有 2 个画布的 PhoneGap 应用程序中不起作用

Question

我正在 HTML5 开发 space 射击游戏。我有两个 canvases，如下所示。 id为'bg'的是滚动背景（随机生成的星空），另一个是'fld'用来绘制游戏对象

<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>

我的问题是我绑定到 'fld' 的触摸事件在 Phone Gap 应用程序中不起作用。但它在我的 android 手机的 Chrome 浏览器中运行良好。我删除了 bg canvas 并尝试了另一个构建并且它运行良好。但我想在我的游戏中使用多个 canvases。

我使用这些样式（styles.css 文件）将 canvas 一个放在另一个上面

*{
  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;
}

我附上我的活动如下

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

space.ontouchstart = function(event) {

 ....


};

space.ontouchend = function(event) {

 ....

};

space.ontouchmove = function(event) {

 ....


};

当我使用单个 canvas 时，事件绑定没有问题。但是当我在 Phone Gap 应用程序中包含背景 canvas 和运行时，它不会响应触摸事件。

我在这里做错了什么？

Answer 1

在我将以下 eventListener 添加到 document.body 后它起作用了。

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

Touch 在具有 2 个画布的 PhoneGap 应用程序中不起作用

Touch is not working in PhoneGap app with 2 canvases

javascript

html

cordova

phonegap-build