Javascript 如何在不减速的情况下检测大量项目上的mouseenter/mouseleave事件

关于画布处理鼠标事件，我有一个非常具体的问题。 我正在做一个等距游戏，我有一个显示所有瓷砖的地图，我想知道鼠标在哪一个上面

在基本等轴测地图上，使用基本仿射函数（ax+b，带“a”的是宽度/高度，b是地图视图的当前位置，图像上的红线），很容易在地图位置（橙色）上变换屏幕上的位置（下一幅图像上为蓝色）

但我有一个复杂的问题，游戏的每一块都有一个特定的高度（在第二张图上用红色箭头显示）。所以我不能对地图的每一行（y）/每一列（x）使用一个函数。 使用相同的技术，我将尝试为每个鼠标事件（移动、单击等）逐个计算鼠标位置是否在每个磁贴上，但我担心繁重的代码：如果我有一个100x100的地图，我晃动鼠标，我相信所有这些测试都会破坏客户端浏览器

我真的不知道怎样才能做得更好？！

---

有人有优化此检查的想法或建议吗？

如果不查看代码，很难向您提供建议，但是我建议在父元素上使用委派事件。这样，单个事件处理程序将处理网格中的所有等距图块。每个对象将表示一个平铺。然后，当鼠标事件爆发时，您将能够快速计算。从那时起，您将有能力得出最佳结果，这取决于performance@RoryMcCrossan：对不起，我没有任何代码要显示。在您的情况下，我将只有一个事件句柄，但对于每个鼠标移动，我必须测试所有分幅。你不认为它太重吗？@arik，如果我理解的话，你认为最好一个一个地创建一个对象，一个一个地创建一个事件处理程序。当鼠标移动时，所有对象都将接收事件，并且每个对象都将测试鼠标是否在平铺上？是吗？但是，如果鼠标位于2个平铺上（如第二个图像）？通过每个瓷砖上的循环，我可以从底部开始，然后在第一个瓷砖上停止：/但我的意思是，这些对象是JavaScript对象，包含数据。如果处理这些对象，速度会很快。之后，可以激活实际渲染元素的真实绘制。这意味着您可以节省大量渲染时间。