gpt4 book ai didi

javascript - 触摸在具有 2 个 Canvas 的 PhoneGap 应用程序中不起作用

转载 作者:行者123 更新时间:2023-12-03 06:32:36 25 4
gpt4 key购买 nike

我正在 HTML5 中开发一款太空射击游戏。我有两 block Canvas ,如下所示。 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>

我的问题是,我绑定(bind)到“fld”的触摸事件在 Phone Gap 应用程序中不起作用。但它在我的 Android 手机的 Chrome 浏览器中运行得很好。我删除了 bg Canvas 并尝试了另一个构建,它工作得很好。但我想在我的游戏中使用多个 Canvas 。

这些是我用来将 Canvas 逐一对齐的样式(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) {

....


};

当我使用单个 Canvas 时,事件绑定(bind)没有问题。但是,当我包含背景 Canvas 并运行 Phone Gap 应用程序时,它不会响应触摸事件。

我在这里做错了什么?

最佳答案

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

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

关于javascript - 触摸在具有 2 个 Canvas 的 PhoneGap 应用程序中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38380906/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com