Javascript использовать событие mouseMove для перемещения объектов не работает, когда мышь внезапно перемещается быстро - PullRequest
Новая
       32

Javascript использовать событие mouseMove для перемещения объектов не работает, когда мышь внезапно перемещается быстро

0 голосов
/ 17 июня 2020

Я пытаюсь создать функцию перетаскивания для фигур в SVG, используя svelte framework. Вот структура svg 

<svg>
  <g
    on:mousedown={mouseDownHandler}
    on:mousemove={mouseMoveHandler}
    on:mouseup={mouseUpHandler}>
    <circle />
  </g>

Но с этой структурой, если я быстро перемещаю мышь, она может случайно выйти из <g>, прежде чем ее можно будет обновить с текущим местоположением мыши, и mouseMoveHandler перестанет отвечать.

Я пробовал что-то вроде запоминания выбранного элемента в mouseDownHandler, надеясь, что даже если мышь больше не находится в группе, она все равно сможет использовать текущее местоположение мыши для перемещения. Но это не сработало, как я ожидал.

Я подозреваю, что этот mouseMoveHandler активируется только тогда, когда мышь находится в группе, это правильно? Есть предложения, как решить эту проблему?

Спасибо

Обновление: я знаю, что добавление обработчиков в родительскую группу решит проблему. Причина, по которой я sh так поступаю, заключается в том, что существуют разные типы элементов, и я хотел бы делать с ними разные вещи. Прямо сейчас у меня есть все в одном большом mouseMoveHandler под svg, и все работает нормально, но это становится действительно уродливым, когда я добавляю больше функций в обработчик. Вот почему я хочу sh иметь разные обработчики для разных элементов.

1 Ответ

1 голос
/ 17 июня 2020

Когда вы реализуете перетаскивание (в любой ситуации, не только в Svelte или SVG), никогда не применяйте обработчик 'move' к самому элементу. Всегда применяйте его (и обработчик «вверх») к window. Обработчик «вниз» должен отвечать за регистрацию начальных координат и регистрацию обработчиков «перемещение» / «вверх», не более того.

...