2016-07-14 2 views
0

私はHTML5で宇宙飛行士を開発しています。私は以下の2つのキャンバスを持っています。 idが 'bg'のものはスクロールバックグラウンド(ランダムに生成された星型フィールド)用で、もう1つはゲームオブジェクトを描画するために使われます。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'にバインドしたタッチイベントは、Phone Gapアプリでは機能しないということです。しかし、それは私のアンドロイドモバイルのChromeブラウザで完全に動作します。私はbgキャンバスを取り除き、別のビルドを試みましたが、それは完全に機能しました。しかし、私は私のゲームに複数のキャンバスが必要です。

これら

は私がノーを持って、私は

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

space.ontouchstart = function(event) { 

.... 


}; 

space.ontouchend = function(event) { 

.... 

}; 

space.ontouchmove = function(event) { 

.... 


}; 

以下のように私のイベントを添付しています別の

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

の上にキャンバス1を揃えるために使用するスタイル(Styles.cssをファイル)です私は単一のキャンバスを使用しているときにイベントのバインドに問題があります。しかし、バックグラウンドキャンバスを含めてPhone Gapアプリを実行すると、タッチイベントには反応しません。

私はここで間違っていますか?

+0

もっと詳細な例がありますか?私はあなたの問題を理解していますが、それを再生産する方法はまだ分かりません。 – trungk18

+0

@ trungk18、詳細を追加するためにhtmlコードを編集しました。詳細が必要な場合はお知らせください。また、私は電話ギャップconfig.xmlでランドスケープモードを使用しています。 –

+0

申し訳ありません、私の休暇から戻ってきます。あなたは既に問題を解決しているようだ:D – trungk18

答えて

1

次のeventListenerをdocument.bodyに追加した後で動作しました。

document.body.addEventListener('touchstart',function(event) { 
event.preventDefault(); 
}); 
関連する問題