Question

想象一下用react语言编写的简单ms paint应用程序，而您正在尝试实现矩形绘图。

这是我目前拥有的东西，但是如果我将鼠标拖到矩形上，我正在绘制的图形会开始闪烁，因为它触发的事件是相对于矩形的位置，而不是绘制区域（在我的情况下为div）元素（绘图区域/矩形）当前在我的鼠标上方。

我已经将问题提取到了这个简单的应用https://codesandbox.io/s/6yxx4y9lz3

中

我觉得我可以用hacky计算来解决问题，但是我希望能得到一些优雅的解决方案/建议，因为该功能将成为更大应用程序的基础。

Answer 1

实际的问题是您正在绘制的蓝框吞噬了鼠标事件。

您可以仅向其中添加pointer-events:none，以便将其忽略。（ pointerEvents在React内部使用时）

style={{
    width: item.w,
    height: item.h,
    top: item.y,
    left: item.x,
    border: "solid blue",
    position: "absolute",
    pointerEvents:"none"
}}

https://codesandbox.io/s/l7ll3wy5pl上的演示已更新

当鼠标悬停在要绘制的元素上时，如何计算鼠标相对于绘制区域的位置

1 个答案: