觸摸無法在2個畫布上使用PhoneGap應用程序

我正在開發HTML5中的太空射擊遊戲。我有兩個畫布如下。 id爲'bg'的那個用於滾動背景（這是一個隨機生成的星域），另一個'fld'用於繪製遊戲對象。觸摸無法在2個畫布上使用PhoneGap應用程序

<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」觸摸事件不會在電話峽應用工作。但它在我的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應用程序時，它不會響應觸摸事件。

我在這裏做錯了什麼？

來源

2016-07-14 Krishnakumar_Muraleedharan

你能舉一個更詳細的例子嗎？我瞭解你的問題，但仍不知道如何重新制作它。 – trungk18

@ trungk18，我編輯了html代碼以添加更多細節。如果您需要更多詳細信息，請告訴我。另外我在手機間隙config.xml中使用橫向模式。 –

對不起，剛從我的假期回來。看來你已經解決了這個問題：D – trungk18

它在我將以下eventListener添加到document.body後工作。

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

來源

2016-07-15 07:19:45

觸摸無法在2個畫布上使用PhoneGap應用程序

回答

相關問題