0

HTML5キャンバスを使用してゲームを作成しています。Internet Explorerでドラッグアンドドロップすると、奇妙な動作が発生します。ほとんどの場合は機能しますが、約10回に1回は、ドラッグできない画像記号(十字が入った小さな円)が表示されます。mouseupこれが発生した後にマウスボタンを離すと、画像が所定の位置にジャンプし、イベントが発生しなかったように、マウスボタンが上がっていてもマウスを追いかけます。これは他のブラウザではまったく発生しないため、ドラッグアンドドロップを実装した方法ではないと思います。

ドラッグアンドドロップコードに問題があったとしても、なぜこの記号が表示されるのか理解できません。画像をドラッグしようとしていることをどうやって知ることができますか?誰かがこれを以前に経験したことがありますか、そしてあなたはそれについて何をしましたか?

私は独自の入力クラスを持っているので混乱しているように見えるかもしれませんが、それは単なる標準のドラッグアンドドロップであるため、コードを投稿する必要はないと思いました。しかし、ここでいくつかの詳細について話します。

マウスがそのフレームを押された場合、ドラッグ可能な画像の1つの上にあるかどうかを確認します。その場合、次にマウスボタンを押したままマウスを動かすと、画像はマウスの新しい位置からオフセットを引いた位置に移動します。

マウスを離すたびにマウス移動イベントリスナーを削除し、マウスボタンを押すたびにイベントリスナーを追加します。各mousedownイベントとmouseupイベントを配列に格納し、各フレームでイベントをループして適切なフラグを設定します。(wasPressed、、、wasReleasedなどisDown)最新のmousemoveイベントのみを保存します。次に、ゲームループからこれらのフラグをクエリします。

4

1 に答える 1

1

イベントがバブルしないようe.preventDefault();にしてください。通常、これは mouseodwn/move/up イベントを呼び出すことを意味します

さらに、キャンバス上での選択を禁止する必要があります。これにより、ドラッグやダブルクリックのバグがいくつか停止するはずです。

canvas.addEventListener('selectstart', function(e) { e.preventDefault(); return false; }, false);

于 2012-09-04T17:07:21.447 に答える