Keep calling a function while hovering AND moving over an element

Question

I want to detect when the mouse is moving, while hovering over an element.

I've seen this answer, which uses an interval, but it's not the same. The interval will keep calling the function regardless of whether the mouse is moving or not. I only want to call the function IF the mouse is being moved while on top of the div.

For example, I can obviously add the mouseover event handler:

document.getElementById.addEventListener("mouseover", function( event ) {})

But this only calls the function once. Same with the hover event handler.

How can I keep calling the function while hovering AND moving, and then have the function stop calling when no longer hovering (.e.g. blur)?

score 1 · Accepted Answer · answered Sep 24 '21 at 18:36

1

There is mousemove event. From documentation: The mousemove event is fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it.

answered Sep 24 '21 at 18:36

Auxilliar

71
4

score 1 · Answer 2 · answered Sep 24 '21 at 18:37

1

would onmousemove event work? it will call the function when the mouse is moving.

MDN doc

answered Sep 24 '21 at 18:37

Yichz

9,250
10
54
92

score 0 · Answer 3 · answered Sep 24 '21 at 18:35

0

What you described is part of your solution. You can trigger the interval when mouseover event is triggered. The interval will trigger your function.

You can then add the mouseout event to the same element and stop the interval. This will stop the function from being triggered.

Let me know if this works for you!

answered Sep 24 '21 at 18:35

Timo Frionnet

474
3
16

The mousemove event was the answer. Thanks. – Cybernetic Sep 24 '21 at 18:39
1

Happy to hear you solved your issue! Best of luck – Timo Frionnet Sep 24 '21 at 18:47

Keep calling a function while hovering AND moving over an element

3 Answers3