时间戳

首页 > 解决方案 > 如何计算鼠标悬停在正在绘制的元素上时相对于绘图区域的位置

javascript - 如何计算鼠标悬停在正在绘制的元素上时相对于绘图区域的位置

问题描述

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

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

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

我觉得我可以通过 hacky 计算来解决问题，但我会很感激一些优雅的解决方案/建议，因为这个功能将成为更大应用程序的基石。

标签： javascriptreactjsdomdom-events

解决方案

实际问题是您绘制的蓝色框会占用鼠标事件。

您可以添加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更新了演示

推荐阅读