События SVG mousemove перестают запускаться в Firefox после нескольких нажатий мыши

Я пишу приложение HTML5, используя в основном SVG-контент на HTML-странице. Одна из задач, которые мне нужно выполнить, — это перемещение объектов на холсте. Я обнаружил, что в Firefox первая операция нажатия-перетаскивания-отпускания работает, как и ожидалось, но очень скоро код перестает получать события mousemove после нажатия кнопки мыши. Вместо этого я вижу курсор «охотники за привидениями», как будто Firefox думает, что я пытаюсь выполнить операцию перетаскивания. В конечном итоге я могу восстановить mousemove после событий mousedown в течение одного или двух циклов, щелкнув зеленый прямоугольник, но затем проблема повторяется. Я даже установил draggable="false", как показано в простом тестовом примере ниже, чтобы убедиться, что DnD отключен. (Весь контент был скопирован из одного файла, хотя здесь он выглядит разделенным.)

Этот тестовый пример отлично работает в IE9, Chrome, Opera и Safari.

Аналогичная «чистая» SVG-страница работает как в Firefox, так и в других браузерах.

Я использую Firefox 15.0.1 на клиенте Windows 7, обслуживая страницу из окна 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>


svg html firefox dom-events mousemove
person grw    schedule 27.09.2012    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Вы должны вызвать 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;
  }
person Robert Longson    schedule 27.09.2012
comment
В конце концов, это сработало, как только я отменил еще один эксперимент по регистрации обработчика события mousedown, который я пробовал в то же время. Я предполагаю, что mousedown является ключом к предотвращению нежелательного (в моем случае) поведения по умолчанию. Хотя я удивлен, что установки draggable=false даже для SVG, а также для элемента rect было недостаточно, чтобы отключить поведение по умолчанию, я благодарю вас за быстрый ответ! - person grw; 27.09.2012
comment
Элементы SVG в настоящее время не имеют атрибута перетаскивания. Я полагаю, что предстоящая спецификация SVG 2 может решить эту проблему. - person Robert Longson; 27.09.2012