jQuery 中 mouseout() 和 mouseleave() 的触发时机，都是在鼠标离开匹配的元素时被触发，在他俩之间的不同，主要就是在子元素上“事件冒泡”处理方式上的区别。
1. 没有子元素的情况下。
如果匹配的元素没有子元素的情况下，这两者之间是没有区别的。
2. 匹配的元素还有子元素。
如果匹配元素有子元素，那么这两者之间的区别主要来自于对“事件冒泡”时候的处理。
例如，下面的结构：
<div id="outerBox">OuterBox
<div id="innerBox">InnerBox
</div>
</div>P.S 确保给 outerBox 和 innerBox 都绑定某些事件。
mouseout()
当鼠标进入 “outerBox” ，没有事件被触发。
当鼠标离开 “outerBox” ，并且进入 “innerBox” ， “outerBox” 上绑定的事件被触发。
当鼠标离开 “innerBox” ， 并且进入 “outerBox” ， 紧随着 “outerBox” 的事件，“innerBox” 上绑定的事件被触发。
当鼠标离开 “outerBox”， “outerBox” 上绑定的事件被触发。
mouseleave()
当鼠标进入 “outerBox” ，没有事件被触发。
当鼠标离开 “outerBox” ，并且进入 “innerBox” ， 没有事件被触发。
当鼠标离开 “innerBox” ， 并且进入 “outerBox” ，“innerBox” 上绑定的事件被触发。
当鼠标离开 “outerBox”， “outerBox” 上绑定的事件被触发。
为了更好地理解，下面给出一个例子。
<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>或者点击这里看看这个例子.
没有评论