jQuery 中 mouseout() 和 mouseleave() 的触发时机,都是在鼠标离开匹配的元素时被触发,在他俩之间的不同,主要就是在子元素上“事件冒泡”处理方式上的区别。

1. 没有子元素的情况下。

如果匹配的元素没有子元素的情况下,这两者之间是没有区别的。

2. 匹配的元素还有子元素。

如果匹配元素有子元素,那么这两者之间的区别主要来自于对“事件冒泡”时候的处理。

例如,下面的结构:

1
2
3
4
    <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” 上绑定的事件被触发。

为了更好地理解,下面给出一个例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
    <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>

或者点击这里看看这个例子.