Touch在带有2个画布的PhoneGap应用中不起作用

Question

我正在用HTML5开发太空射击游戏。 我有两个画布，如下所示。 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画布，并尝试了另一个构建，它运行良好。 但是我想在游戏中放多个画布。

这些是样式（styles.css文件），用于将画布一个对齐另一个

*{
  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) {

 ....


};

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

我在这里做错了什么？

Answer 1

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

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

Touch在带有2个画布的PhoneGap应用中不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-07-15 07:19:45

Touch在带有2个画布的PhoneGap应用中不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-07-15 07:19:45

解决方案1
1 已采纳 2016-07-15 07:19:45