Javascript 反应：如何在画布之外捕捉onMouseUp事件？

我有一个react组件，它由

画布

和一些鼠标处理程序组成，允许用户在按下鼠标时绘制一个矩形。释放鼠标（

onMouseUp

）时，我希望图形停止，这样进一步的鼠标移动不会改变画布

只要鼠标指向画布时释放鼠标，此功能就可以工作。但是，如果我按下按钮，将鼠标移到外面，然后松开按钮，则不会触发

onMouseUp

事件。因此，当我将鼠标移回画布上时，它会继续绘制，尽管它不应该这样做

---

捕捉组件外部事件的最佳方法是什么？在

窗口上注册侦听器

？检查鼠标是否在

mouseMove

处理程序中按下？

关于

onmouselave

我考虑过了。我可以在画布上出现onMouseLeave时向文档添加mouseUp侦听器，然后在mouseenter上再次删除它。这是正确的解决方案吗？还是有更多的“react-y”？好吧，我用

onMouseLeave

和

onMouseEnter

实现了它。很好用。非常感谢。