Javascript 当鼠标突然快速移动时，使用 mouseMove 事件移动对象不起作用

Question

我正在尝试使用 svelte 框架为 svg 中的形状构建拖放功能。这是 svg

的结构

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

但是使用这种结构，如果我快速移动鼠标，它可能会在用当前鼠标位置更新之前不小心移出 <g>，并且 mouseMoveHandler 将停止响应。

我尝试过在mouseDownHandler中记忆选中的元素，希望即使鼠标不在组内，也能使用当前的鼠标位置移动。但是它并没有像我预期的那样工作。

我怀疑这个 mouseMoveHandler 只在鼠标在组内时被激活，是否正确？关于如何克服这个问题的任何建议？

谢谢

Update: I am aware that adding the handlers to the parent group would solve the problem. The reason why I wish to do so is because there are different types of elements, and I would like to do different things with them. Right now I have everything in one big mouseMoveHandler under the svg and everything works fine, but it's getting really ugly as I add more features to the handler. This is why I wish to have different handlers for different elements.

Answer 1

在执行拖放操作时（在任何情况下，不仅仅是 Svelte 或 SVG），切勿将 'move' 处理程序应用于元素本身。始终将它（和 'up' 处理程序）应用于 window。 'down' 处理程序应该负责记录起始坐标并注册 'move'/'up' 处理程序，仅此而已。

Javascript 当鼠标突然快速移动时，使用 mouseMove 事件移动对象不起作用

Javascript use mouseMove event to move objects does not work when mouse suddenly moves quick

html

javascript

svg

drag-and-drop

svelte