1

通常のブラウザーから期待どおりに動作する非常に単純な HTML5 ゲームがありますが、iPhone または iPad のブラウザーからアクセスすると、クリック イベントまたはタッチスタート イベントが認識されません。

元のコードは、ここにあるチュートリアルからのものです: http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/

私はそれを修正し、スマイリーフェイスをキャンバス上のどこにでも移動させるクリックイベントを追加しました。このクリック イベントは、Mac および Windows ブラウザーからマウスを使用して正常に動作します: http://iwebss.com/test

ただし、iPhone や iPad でアクセスすると、クリック イベントが機能しません。また、タッチスタートのリスナーを追加しようとしましたが、これも機能しません。

これらは、コードに追加した新しいリスナーです。

    addEventListener("click", mouseClickEvent, false);
    function mouseClickEvent(e) {
        alert("click event");
            mouseClick = true;
        if (e.offsetX) {
              mouseX = e.offsetX;
              mouseY = e.offsetY;
            }  else if(e.layerX) {
              mouseX = e.layerX;
              mouseY = e.layerY;
            }
    }

    addEventListener("touchstart", testEvent, false);
    function testEvent(e) {
        alert("touchstart event");
    }

私が間違っていること、またはiPhoneとiPadのタッチイベントを読み取る方法についてのアイデアはありますか?

編集:私も動作しない mousedown イベントを試しました。

解決済み：私はそれを理解しました...以下の私の答えを見てください。

4

2 に答える 2

5

アタッチするハンドラーは次のとおりです。 

ontouchstart - a finger goes down.
ontouchmove - a finger moves.
ontouchend - a finger goes up.

ongesturestart - a scale or a rotation starts.
ongesturechange - a scale or a rotation.
ongestureend - a scale or a rotation ends.

いくつかのメタ iOS 固有のメタ タグとその他の情報は、こちら にあります。

于 2012-06-25T00:05:05.277 に答える
3

わかりました... イベントリスナーは通常のブラウザーで動作しますが、iphone/ipad の場合は特にキャンバスにアタッチする必要があります。

だから私の与えられた例では、私は持っています：

var canvas = document.createElement("canvas");

したがって、これは通常のブラウザーでは機能しましたが、iphone/ipadでは機能しませんでした:

addEventListener("click", mouseClickEvent, false);

解決策：これは、iPhone / iPadで動作させるために私がしなければならなかったことです（canvas.を前に追加します）：

canvas.addEventListener("click", mouseClickEvent, false);

これは touchstart イベントでも機能しました。

余談ですが、iPhoneでタッチスタートを使用するかクリックイベントを使用するかは重要ですか??

于 2012-06-25T00:34:44.970 に答える