CODEWITHSUNDEEP
javascriptjqueryhtmlonmouseout
user3232685
user3232685

Reputation: 31

onMouseOut firing without mouse leaving div

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!

Upvotes: 3

Views: 183

Answers (2)

James Bone
James Bone

Reputation: 576

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.

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 205979

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);

});

Upvotes: 1

Related Questions