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

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

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

但是在这种结构中，如果我快速移动鼠标，它可能会在更新鼠标当前位置之前意外地移出

，mouseMoveHandler将停止响应

我试着在mouseDownHandler中记住所选元素，希望即使鼠标不再在组中，它仍然可以使用当前鼠标位置移动。但它并没有像我预期的那样起作用

我怀疑这个mouseMoveHandler只有在鼠标位于组内时才被激活，对吗？对于如何克服这个问题有什么建议吗

谢谢

更新： 我知道将处理程序添加到父组可以解决这个问题。我之所以希望这样做，是因为有不同类型的元素，我想用它们做不同的事情。现在，我在svg下的一个大mouseMoveHandler中拥有所有功能，所有功能都可以正常工作，但随着我向处理程序添加更多功能，它变得非常丑陋。这就是为什么我希望对不同的元素使用不同的处理程序

---

在实现拖放时（在任何情况下，而不仅仅是Svelte或SVG），永远不要将“移动”处理程序应用于元素本身。始终将其（以及“up”处理程序）应用于

窗口

。“向下”处理程序应负责记录开始坐标并注册“移动”/“向上”处理程序，仅此而已。

觉得不值得回答-但将mousemove/mouseup放在外部容器上可以让您处理这些情况，即鼠标事件可能无法可靠地从组件本身触发。>我怀疑此mousemoveholder仅在鼠标位于组内时激活，对吗？是>关于如何克服这个问题有什么建议吗？你能用小提琴来举个例子吗？你的“g”中有多少元素？也许试着在主“g”中使用更小的“g”我知道你正在将鼠标移动应用到组中？如果是，则将其应用于svg元素