Javascript 浏览器窗口收缩/移动时画布单击事件出错

我一直在努力在HTML5画布上创建一个六边形网格。我有一个基本的网格，如果你点击一个十六进制，它会突出显示这个十六进制（这里演示：）

在javascript中，我这样定义画布（为了简洁起见，省略了一些部分）：

所有代码都可以在此处找到：

我的主要问题是：当通过浏览器调整画布的大小时，是否有一种特定的方法来防止单击事件变得完全扭曲？例如，如果将浏览器缩小到刚好大于网格，则单击“不在正确位置注册”。我是否缺少画布的某些特征？可能GetSelectedFile（）的定义不正确

---

编辑：这似乎主要发生在浏览器稍微滚动时，从而将网格移出屏幕。然后点击以一个奇怪的偏移量注册，我猜这个偏移量等于屏幕滚动的距离。建议？

您必须将其置于页面滚动的位置

在中，而不是：

hex.clickEvent = function(e) {
        var mouseX = e.pageX;
        var mouseY = e.pageY;

这样做：

hex.clickEvent = function(e) {
        var mouseX = e.pageX - window.pageXOffset;
        var mouseY = e.pageY - window.pageYOffset;

---

首先，非常酷的项目！第二，当我调整尺寸时，我并没有看到chrome中的事情变得一团糟。无论大小，点击量似乎都很好，包括刚超过网格的点击量。谢谢你的好话。我想我在Firefox，但它基本上归结为滚动。如果我滚动到一边，或者以任何方式移动网格，单击register以这个奇怪的偏移量（可能与我滚动的量成比例）。那么，你锁定滚动条了吗？看来一定有更好的方法来防止这种情况。如果你添加了任何类型的用户界面（比如侧面的菜单或任何东西），你最终可能会滚动。好吧，我在FF中试过了，我明白你的意思了。是菜单把东西推来推去。这些不会在Chrome中显示。我会玩一会儿，看看能不能找到问题。如果你想玩的话，我这里有一些六边形的绘图代码。（查看来源）我本打算做一个风险型游戏，但失去了动力。哈。一、 我也要去冒险，就像玩游戏一样。。。不久前失去了动力。我实际上有一个半工作版本，但它是意大利面代码。这是一种返工。我总是在将事物与画布对象和/或引导对齐时遇到问题。我想你已经读过这个了吧？这确实有效！我想我很困惑，因为在clickEvent处理程序链的下一步，我使用canvas.getBoundingClientRect（），我知道它考虑了滚动。我从来没有想过，最初的点击不会考虑到这一点。

hex.clickEvent = function(e) {
        var mouseX = e.pageX - window.pageXOffset;
        var mouseY = e.pageY - window.pageYOffset;