4

HTML ページ内で、主に SVG コンテンツを使用して HTML5 アプリを作成しています。実行する必要があるタスクの 1 つは、キャンバス上でオブジェクトを移動することです。Firefox では、最初のプレス ドラッグ リリース操作は期待どおりに機能することがわかりましたが、マウスダウンの後すぐにコードが mousemove イベントの受信を停止します。代わりに、Firefox が私がドラッグ アンド ドロップ操作をしようとしていると認識しているかのように、"ghostbusters" カーソルが表示されます。緑色の四角形の周りをクリックすることで、1 ～ 2 サイクルの mousedown イベントの後に mousemove を最終的に復元できますが、その後問題が再発します。DnD が無効になっていることを確認するために、以下の簡単なテスト ケースに見られるように、draggable="false" も設定しました。(すべてのコンテンツは 1 つのファイルからコピーされたものですが、ここでは分離されているように見えます。)

このテスト ケースは、IE9、Chrome、Opera、および Safari で正常に動作します。

同様の「純粋な」SVG ページは、Firefox や他のブラウザーでも機能します。

Windows 7 クライアントで Firefox 15.0.1 を使用して、Linux ボックスからページを提供しています。

足りないものはありますか？それとも、これはおそらく Firefox のバグですか?

<!DOCTYPE HTML5>


<title>Test Mouse Events</title>

<script>

function mouseDown(evt)
  {
  document.getElementById("udText").textContent = "mousedown at "+evt.clientX+","+evt.clientY;
  }

function mouseMove(evt)
  {
  document.getElementById("moveText").textContent = "mousemove at "+evt.clientX+","+evt.clientY;
  }

function mouseUp(evt)
  {
  document.getElementById("udText").textContent = "mouseup at "+evt.clientX+","+evt.clientY;
  }

function init()
  {
  document.getElementById("field").addEventListener("mousedown", mouseDown, false);
  document.getElementById("field").addEventListener("mouseup", mouseUp, false);
  document.getElementById("field").addEventListener("mousemove", mouseMove, false);
  }

</script>


<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns:ev="http://www.w3.org/2001/xml-events"
  id="canvas"
  width="800"
  height="600"
  version="1.1"
  baseProfile="full"
  onload="init()"
  >

  <rect id="field" x="50" y="50" width="700" height="500" fill="#20c000" draggable="false"/>
  <text id="udText" x="80" y="520" font-size="30" fill="#000000">No up or down events yet</text>
  <text id="moveText" x="420" y="520" font-size="30" fill="#000000">No move events yet</text>

</svg>

4

1 に答える 1

9

evt.preventDefault（）;を呼び出す必要があります。すべてのmouseXXXハンドラーで。Firefoxにはデフォルトのドラッグアンドドロップ処理があり、それは望ましくありません。それがFirefoxのバグではありません。

これらの変更は私のためにそれを修正します：

function mouseDown(evt)
  {
  evt.preventDefault();
  document.getElementById("udText").textContent = "mousedown at "+evt.clientX+","+evt.clientY;
  }

function mouseMove(evt)
  {
  evt.preventDefault();
  document.getElementById("moveText").textContent = "mousemove at "+evt.clientX+","+evt.clientY;
  }

function mouseUp(evt)
  {
  evt.preventDefault();
  document.getElementById("udText").textContent = "mouseup at "+evt.clientX+","+evt.clientY;
  }
于 2012-09-27T15:23:58.380 に答える