鼠标离开舞台时，鼠标卡在拖动模式下

Question

我正在使用React-konva。

我实现了带有可拖动手柄的水平控件。

我有一个舞台，一个图层，并且手柄是其中的一个组。代表手柄的组是可拖动的，拖动位置仅限于水平移动。

当我拖动手柄时，它可以正常工作，但是当鼠标离开舞台时，拖动将卡住：即使释放鼠标按钮，手柄仍会被拖动（手柄组仍在发生onDragMove事件）。如果我在舞台上单击，则释放鼠标并停止拖动。

该如何处理？我是否应该检测到鼠标已离开控件并以某种方式响应？

以下是代码的相关部分：

restrictDragToHorizontal(pos) {
   return {x: pos.x, y: this.getAbsolutePosition().y};
}

render() {
...
return (
  <div className="Timeline">
  </div>
    <Stage width={...} height={...}>
      <Layer>
            <Group name="handle" draggable={true} x={...} y={...} 
              onDragMove={ (event) => {
                ...
              }}
              onDragEnd={ (event) => {
                ...
              }}
              dragBoundFunc={this.restrictDragToHorizontal}
            >
              <Rect ... />
              <Circle ... />
              <Text ... />
            </Group>
      </Layer>
    </Stage>
)
}