Issue: When quickly mousing over multiple sibling elements directly next to each other, sometimes the onm ouseOver 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 onm ouseOver element.

How can I limit the onm ouseOver 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.

CodePudding user response：

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

CodePudding user response：

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