Different between mouseout() and mouseleave() in jQuery

In jQuery, both mouseout() and mouseleave() events are fire when the mouse leaves the matched element. The only different is in the way of the “event bubbling” handle in child element, let’s see two scenarios :

1. NO child element

If the matched elements have no child element, both mouseout() and mouseleave() events are work exactly same. See try it yourself below.

2. WITH child element inside

If the matched elements have child element, both mouseout() and mouseleave() events are work different in the way of “event bubbling” :

For example, a “outerBox” contains a child element “innerBox”.


<div id="outerBox">OuterBox
	<div id="innerBox">InnerBox
	</div>
</div>

P.S Assure both outerBox and innerBox are attached to certain events.

mouseout()
  1. When mouse enters the “outerBox”, no event will fire.
  2. When mouse leaves the “outerBox”, and enters “innerBox”, fire the “outerBox” event.
  3. When mouse leaves the “innerBox”, and enters “outerBox”, fire the “innerBox” event, follow by the “outerBox” event.
  4. When mouse leaves to the “outerBox”, fire the “outerBox” event.
mouseleave()
  1. When mouse enters the “outerBox”, no event will fire.
  2. When mouse leaves the “outerBox”, and enters “innerBox”, no event will fire.
  3. When mouse leaves the “innerBox”, and enters “outerBox”, fire the “innerBox” event.
  4. When mouse leaves to the “outerBox”, fire the “outerBox” event.

Let’s understand it by playing the below example :

Try it yourself


<html>
<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
	#mouseout-outerBox1, #mouseleave-outerBox1,
	#mouseout-outerBox2, #mouseleave-outerBox2{
		margin:8px;
		border:1px groove #999966;
		background-color : #999966;
		width:150px;
		height:150px;
		color:white;
	}
	#mouseout-innerBox2, #mouseleave-innerBox2{
		margin:8px 8px 8px 16px;
		border:1px groove #0000FF;
		background-color : #0000FF;
		width:100px;
		height:100px;
		color:white;
	}
	span{
		padding:8px;
	}
	.content{
		width:500px;
		height:250px;
	}
	.container1{
		float:left;
		padding-right:16px;
	}
</style>

</head>
<body>
  <h1>jQuery mouseout() vs mouseleave() example</h1>

<div class="content">
  <div class="container1">
	  <span>mouseout() - no child element</span>
	  <div id="mouseout-outerBox1">OuterBox
	  </div>
	  <span id="mouseout-msg1">#mouseout is fired : 0</span>
  </div>

  <div class="container1">
  	  <span>mouseleave() - no child element</span>
	  <div id="mouseleave-outerBox1">OuterBox
	  </div>
	  <span id="mouseleave-msg1">#mouseleave is fired : 0</span>
  </div>
</div>



<div class="content">
  <div class="container1">
	  <span>mouseout() - with child elements</span>
	  <div id="mouseout-outerBox2">OuterBox
	  	<div id="mouseout-innerBox2">InnerBox
	  	</div>
	  </div>
	  <span id="mouseout-outer-msg2">#mouseout outer is fired : 0</span>
          <br/>
	  <span id="mouseout-inner-msg2">#mouseout inner is fired : 0</span>
  </div>

  <div class="container1">
  	  <span>mouseleave() - with child elements</span>
	  <div id="mouseleave-outerBox2">OuterBox
	  	<div id="mouseleave-innerBox2">InnerBox
	  	</div>
	  </div>
	  <span id="mouseleave-outer-msg2">#mouseleave outer is fired : 0</span>
          <br/>
	  <span id="mouseleave-inner-msg2">#mouseleave inner is fired : 0</span>
  </div>
</div>

<script type="text/javascript">

//example 1
var mouseout1=1;
$('#mouseout-outerBox1').mouseout(function(event) {
  $('#mouseout-msg1').text('#mouseout is fired : ' + mouseout1++)
});

var mouseleave1=1;
$('#mouseleave-outerBox1').mouseleave(function(event) {
  $('#mouseleave-msg1').text('#mouseleave is fired : ' + mouseleave1++)
});

//example 2
var mouseoutouter2=1;
$('#mouseout-outerBox2').mouseout(function(event) {
  $('#mouseout-outer-msg2').text('#mouseout outer is fired : ' + mouseoutouter2++)
});

var mouseoutinner2=1;
$('#mouseout-innerBox2').mouseout(function(event) {
  $('#mouseout-inner-msg2').text('#mouseout inner is fired : ' + mouseoutinner2++)
});

var mouseleaveouter2=1;
$('#mouseleave-outerBox2').mouseleave(function(event) {
  $('#mouseleave-outer-msg2')
         .text('#mouseleave outer is fired : ' + mouseleaveouter2++)
});

var mouseleaveinner2=1;
$('#mouseleave-innerBox2').mouseleave(function(event) {
  $('#mouseleave-inner-msg2')
         .text('#mouseleave inner is fired : ' + mouseleaveinner2++)
});

</script>
</body>
</html>

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

Leave a Reply

avatar
newest oldest most voted
Gregory Iyama
Guest
Gregory Iyama

tks a million!!

Seebiscuit
Guest
Seebiscuit

Way to go Mkyong. Thank’s for the enrichment.

Nagaraju
Guest
Nagaraju

Thanks Mkyong … Really nice article .. thank you for the information since yesterday i’ve been knocking my head around.. with this article i found the sensitive difference between mouseout and mouseleave.

Pawe? Bulwan
Guest
Pawe? Bulwan

Great, self-explanatory example. Thx for the informative article :)

tonwl
Guest
tonwl

thank for this.. this was very helpful!

Occam
Guest
Occam

Since English is clearly not your first language, you should not post in it. Indeed, some might suggest that you not post at all. There are too many amateurs masquerading as professionals on the internet as it is.

rdtriny
Guest
rdtriny

difference between ***.

Avenida Gez
Guest
Avenida Gez

It would be nice to have from you the same samples for mouseover, mouseenter
Thanks

hank
Guest
hank

thx YSMD!

Kenric
Guest
Kenric

Super helpful! Thanks!

trackback
Drop Down menu in Jquery

[…] A very good article with a very clear live demo can be found here: Different between mouseout and mouseleave in jquery. (Check out the the square’s with child elements. The one on the bottom […]

trackback
Javascript: Der Unterschied zwischen onMouseOut und onMouseLeave | Web Developer Blog

[…] Eine ausfĂĽhrlichere Erklärung zum so genannten “Event bubbling” so wie einige praktische Beispiele zu diesen Events findet ihr auf der englischen Seite: mkyong.com. […]

Nicolas
Guest
Nicolas

That was VERY enlightening. Thanks a lot! You opened my eyes.
I was killing myself with srcElement/target and toElement ( that doesn’t work in FireFox ) and checking the elements around to make sure that they didn’t belong to outer elements before firing my code… Meaning that I spent like 3 hours to make sure it was working well… When mouseleave could have saved my day :)
But not it’s great. Thanks a lot.

trackback
Difference between mouseover and mouseenter in jQuery | Jason Fang's Simple Site
Upendra
Guest
Upendra

This example helps a lot,

Thank you very much… :)

kamal
Guest
kamal

I just have encountered this problem today?
your article help me a lot,thanks

droope
Guest
droope

Gotta love jquery (L)

if you had to code this in js :| it’d be a world of pain for most of us