Issue: When quickly mousing over multiple sibling elements directly next to each other, sometimes the onMouseOver event is called on all of them simultaneously.
Expected Behavior: When mousing over sibling elements, I want ONLY the currently hovered element to call the onMouseOver element.
How can I limit the onMouseOver call so that it is only fired on the current hovered element as opposed to all the elements that have been hovered? Thanks in advance.
Since you mentioned limit I would suggest you to throttle or debounce your handler.
Say you set an interval of 1sec; Throttle will fire your function periodically after 1 sec, while debounce only fires once after 1 sec has elasped since you last triggered the handler.
Considering your scenario Throttling might be better. Lodash has a throttle function if you already have lodash thatll be best or you can get one from Simple throttle in JavaScript
Try using mouseenter event. It will fire on entering into an element. So it will fire on entering element and you can add an attribute to Dom to add a check.
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
It turns out I made an error.
The siblings were not being called simultaneously as I had originally thought. However, the reason they seemed to be doing so was because of a setTimeout that I was using within the onMouseOver event.
When quickly mousing over the sibling elements, all logic prior to the setTimeout was being run sequentially as one might expect, but the logic in the setTimeout seemed to be being "batch processed" later on.
Removing the setTimeout eliminated the issue.