如果窗口滚动，则 SVG 鼠标事件不同步答案

【问题标题】：SVG mouse event unsyncronized if window scrolled如果窗口滚动，则 SVG 鼠标事件不同步
【发布时间】：2021-01-17 04:57:51
【问题描述】：

我不知道如何正确解释。

我有一个 svg 元素，它是一个大矩形。如果我向下滚动，然后单击我的元素，则单击未注册我的鼠标所在的位置，但如果我没有向下滚动，我的鼠标将在哪里。

因此，如果我向下滚动 100 像素并单击我的矩形，则单击将在我实际单击的位置上方 100 像素处注册。

就好像我没有向下滚动一样。

编辑：我正在使用 event.clientX 和 event.clientY 来获取鼠标位置。

我是 svg 的新手，我不知道描述我的问题的正确关键字。我正在使用 svg.js，但我认为它与问题无关。

我认为这是众所周知的事情。有人可以指出我正确的方向吗？我在这里寻找什么样的关键字？

问题看起来很简单，我只需要知道要搜索什么。

谢谢。

【问题讨论】：

请编辑您的问题并向我们展示相关代码。 “鼠标事件”和“坐标”是描述问题的好术语。阅读viewports。并查看MouseEvent.clientX example 以了解client 和screen 值之间的区别。
我会这样做的。在这里，我使用 event.clientX 和 event.clientY。我访问了您在鼠标事件上的链接，我看到还有 pageX 和 pageY 属性，以及 screenX/screenY。我会做一些测试并编辑我的问题。
@ccprog 感谢您为我指明了正确的方向。我可以在您提供的链接中找到我的答案。

标签： svg scroll

【解决方案1】：

问题是利用 (event.clientX, event.clientY) 来获取鼠标位置。

在存在垂直和/或水平滚动时，使用这些属性会导致鼠标在页面中出现的位置与 (event.clientX, event.clientY) 提供的鼠标位置不匹配。

我使用 mousedown 事件和 mousemove 事件来创建一个选择矩形，类似于您在视频游戏中可以找到的。当应用水平或垂直滚动时，我的选择矩形没有出现在我的鼠标所在的位置。

这是通过使用 event.pageX 和 event.pageY（而不是 clientX 和 clientY）解决的。

感谢@ccprog 为我指明了正确的方向。

【讨论】：