A Function to Check if the Mouse is Still Hovering an Element Every 10 Milliseconds (and run a function if it is)

Question

I was wondering if there is a function to be run after an element (e.g. div class="myiv") is hovered and check every X milliseconds if it's still hovered, and if it is, run another function.

EDIT: This did the trick for me: http://jsfiddle.net/z8yaB/

I wanted to do the same thing. There are good responses here... http://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery — Steve Wortham, Jun 07 '12 at 14:32

xcopy · Answer 1 · 2012-06-07T14:50:13.540

1

jQuery has the hover() method which gives you this functionality out of the box:

$('.myiv').hover(
    function () {
        // the element is hovered over... do stuff

    }, 
    function () {
        // the element is no longer hovered... do stuff
    }
);

To check every x milliseconds if the element is still hovered and respond adjust to the following:

var x = 10; // number of milliseconds
var intervalId;
$('.myiv').hover(
    function () {
        // the element is hovered over... do stuff
        intervalId = window.setInterval(someFunction, x);
    }, 
    function () {
        // the element is no longer hovered... do stuff
        window.clearInterval(intervalId);
    }
);

DEMO - http://jsfiddle.net/z8yaB/

edited Jun 07 '12 at 14:50

answered Jun 07 '12 at 14:33

xcopy

2,248
18
24

Yes, but the functions are separated. I am having issues with setInterval and clearInterval being in separate functions, so I will need to run a single function that will contain both the setInterval and clearInterval based on the condition if the mouse is hovering or not. – Dzhuneyt Jun 07 '12 at 14:39
I am using the second code you provided and the setInterval runs (a function to scroll an element to the left with 10px). However, when I mouseover the function keeps running. I am guessing the clearInterval is not set properly? – Dzhuneyt Jun 07 '12 at 14:42
Having two different functions that use setInterval and clearInterval with a particular intervalId should have no negative effect as long as the intervalId is scoped correctly (i.e. available to both functions). – xcopy Jun 07 '12 at 14:43
See this fiddle, it demonstrates what I think you are trying to do - http://jsfiddle.net/z8yaB/ – xcopy Jun 07 '12 at 14:49
The JSfiddle you provided did the trick. I think I was referring to the function directly instead of assigning it to a var and referring to the var name. – Dzhuneyt Jun 07 '12 at 15:12

score 1 · Answer 2 · answered Jun 07 '12 at 14:36

You can use variablename = setInterval(...) to initiate a function repeatedly on mouseover, and clearInterval(variablename) to stop it on mouseout.

http://jsfiddle.net/XE8sK/

var marker;
$('#test').on('mouseover', function() {
    marker = setInterval(function() {
        $('#siren').show().fadeOut('slow');
    }, 500);
}).on('mouseout', function() {
    clearInterval(marker);
});

Denys Séguret · Accepted Answer · 2012-06-07T14:48:11.790

For most purposes in simple interfaces, you may use jquery's hover function and simply store in a boolean somewhere if the mouse is hover. And then you may use a simple setInterval loop to check every ms this state. You yet could see in the first comment this answer in the linked duplicate (edit : and now in the other answers here).

But there are cases, especially when you have objects moving "between" the mouse and your object when hover generate false alarms.

For those cases, I made this function that checks if an event is really hover an element when jquery calls my handler :

var bubbling = {};
bubbling.eventIsOver = function(event, o) {
if ((!o) || o==null) return false;
var pos = o.offset();
var ex = event.pageX;
var ey = event.pageY;
if (
    ex>=pos.left
    && ex<=pos.left+o.width()
    && ey>=pos.top
    && ey<=pos.top+o.height()
) {
    return true;
}
return false;
};

I use this function to check that the mouse really leaved when I received the mouseout event :

 $('body').delegate(' myselector ', 'mouseenter', function(event) {
    bubbling.bubbleTarget = $(this);

    // store somewhere that the mouse is in the object

}).live('mouseout', function(event) {
    if (bubbling.eventIsOver(event, bubbling.bubbleTarget)) return;

    // store somewhere that the mouse leaved the object

});

Can you elaborate a little more what this function does exactly and how is it used? — Dzhuneyt, Jun 07 '12 at 14:44
I edited to precise it. Note that this is only useful when you have moving or appearing objects (I use this for a bubble library for very dynamic interfaces). — Denys Séguret, Jun 07 '12 at 14:48

score 0 · Answer 4 · answered Jun 07 '12 at 14:36

0

var interval = 0;
$('.myiv').hover(
    function () {
        interval = setInterval(function(){
           console.log('still hovering');
        },1000);
    }, 
    function () {
        clearInterval(interval);
    }
);

answered Jun 07 '12 at 14:36

Andy

29,707
9
41
58

A Function to Check if the Mouse is Still Hovering an Element Every 10 Milliseconds (and run a function if it is)

4 Answers4

Linked