如何在光标下的所有元素上调用mouseover？ [英] How do I get mouseover called on all elements under the cursor?

问题描述

我有一个网络应用程序，每次点击时都会创建一个点（见下文）。当我将鼠标悬停在一堆点上时，我预计光标下的每个点都会触发mouseover或mouseenter事件。但是，只有一个事件被触发，即堆栈顶部的点。

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

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

预先感谢！

解决方案

它的CSSpointer-events属性为none，然后调用 document.elementFromPoint 使用您拥有的坐标。重复，直到你用完圆点。

当你这样做时，你可能需要禁止鼠标处理程序，所以你不会收到不需要的mouseout / mouseenter事件，因为鼠标指针下的元素发生变化。

I have a web application where every time you click, a dot is created (see below). When I mouse over a stack of dots, I expected to have every dot under the cursor have its mouseover or mouseenter event fire. However, only one event is fired, that for the dot "on top" of the stack.

How would you get the mouseover or mouseenter event to fire for every dot under the cursor (but not those that aren't under the cursor) when the mouse is moved over a stack of multiple dots? (BEGIN EDIT) Additionally, the mouseout or mouseleave event should only fire when the cursor actually leaves the dot. (END EDIT)

In case it's important, the whole black portion in the picture is a SVG, and the dots are all SVG circles. Each dot is a sibling with all the other dots, and all are children of the SVG element.

Thanks in advance!

解决方案

Once you have the first dot, set its CSS "pointer-events" property to "none" and then call document.elementFromPoint using the co-ordinates you have. Repeat till you run out of dots.

You may need to suppress the mouse handler while you're doing this so you don't get unwanted mouseout/mouseenter events as the elements under the mouse pointer change.

这篇关于如何在光标下的所有元素上调用mouseover？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！