如何在光标下的所有元素上调用鼠标悬停？

Question

我有一个Web应用程序，每次单击时，都会创建一个点（见下文）。当我将鼠标悬停在一堆点上时，我希望光标下的每个点都有鼠标悬停或鼠标中心事件触发。但是，只有一个事件被触发，对于堆栈的“顶部”点。

当鼠标移动到多个点的堆栈上时，如何为光标下的每个点（但不是光标下的点）触发mouseover或mouseenter事件？ （BEGIN EDIT）此外，mouseout或mouseleave事件只应在光标实际离开点时触发。 （结束编辑）

如果重要的话，图片中的整个黑色部分是SVG，点都是SVG圆圈。每个点都是包含所有其他点的兄弟，并且都是SVG元素的子节点。

提前致谢！

Answer 1

显然，事件只被调度到为堆栈中最顶端的“点”注册的事件处理程序。展开此事件处理程序以编程方式搜索所有其他点，并确定它们是否可能与精灵的当前位置重叠。如果是这样，机械地单独调用它们的事件处理程序 - 指定一个标志，以便“所有其他点的程序化搜索”也不会发生，对于它们也永远不会结束。如果您无法向事件处理程序添加标志，请向事件处理程序可以观察到的某个对象添加一些字段（例如，对应于点的数据结构），并设置或清除该标志（可能是一个好名称）事先是“isCheckForOverlappingDots”。

Answer 2

获得第一个点后，将其CSS“pointer-events”属性设置为“none”，然后使用您拥有的坐标调用document.elementFromPoint。重复，直到你用完点。

您可能需要在执行此操作时禁止鼠标处理程序，这样当鼠标指针下的元素发生更改时，您不会收到不需要的mouseout / mouseenter事件。