How do I get mouseover called on all elements unde

Question

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!

Answer 1

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.

Answer 2

Evidently, the event is being dispatched only to the event handler registered for the topmost "dot" in the stack. Expand this event handler to programmatically search all other dots and determine whether they may overlap the current position of the sprite. If so, mechanically invoke their event handlers individually--specifying a flag so that the "programmatic search [of] all other dots" doesn't happen FOR THEM also, which will never end. If you're unable to add a flag to the event handler, add some field to some object that the event handler can observe (e.g., the data structure that corresponds to a dot), and set or clear that flag (a good name might be "isCheckForOverlappingDots") beforehand.