onMouseOut firing without mouse leaving div

Question

I know there are a few similar threads here but I can't find anything that solves my issue. I'm new to JS so I'm trying to make this as simple as possible.

I have a fixed position div whose scroll position I want to return to 0 (the top) onMouseOut. Here's my function call:

<div id="searchButton" onmouseout="scrollBack()">

And here's the associated JS:

function scrollBack() {
    $("#searchButton").scrollTop(0);
}

The issue, as I've seen in a few other threads, is that the onMouseOut function (scrollback()) is firing before I actually leave the div.

Can anybody point me in the right direction? I'd imagine it might have to do with event bubbling (rolling over other elements within the div, of which there are many), but that's a little outside my sphere of understanding.

Thank you in advance!

EDIT: Turns out onMouseLeave worked perfectly. Thank you!

Put a breakpoint on the function and see who is triggering the event. — enriquinho, Jan 24 '14 at 16:39
I'm not sure how to properly show the issue is fixed on SO, but Roko C. Buljan - that worked like a charm! I knew there was a simple answer... THANK YOU! — user3232685, Jan 24 '14 at 16:43

score 1 · Answer 1 · answered Jan 24 '14 at 16:44

onmouseleave is more consistent but...

i see you use jQuery, so go for it! LIVE DEMO

<div id="searchButton"> </div>

jQ:

$(function(){ // DOM is now ready

   function scrollBack() {
      $(this).scrollTop(0);
   } 

   $("#searchButton").on('mouseleave', scrollBack);

});

score 0 · Answer 2 · answered Feb 10 '15 at 23:46

onmouseleave: https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave

onmouseout triggers also on child elements ie:

<div id="searchbutton" onmouseleave="scrollBack();"><span>t</span><span>something longer</span></div>

Whenever the mouse left a <span> element it would also fire. onmouseleave will only respond at whatever is closest to the html tag. (Link is more accurate in explaining). If you have only one onmouseleave in that stack it will only respond on that element/node.

onMouseOut firing without mouse leaving div

2 Answers2