.mouseout()
返回: jQuery
.mouseout( handler )
描述：把某个事件函数绑定到JavaScript事件“mouseout”上，或者在某个元素上触发该事件。
加入于: 1.0
.mouseout( handler )加入于: 1.4.3
.mouseout( [eventData ], handler )- eventData类型：Anything一个对象，它包含了要传递给事件处理函数的数据。
- handler一个函数，在每次事件被触发时执行它。
加入于: 1.0
.mouseout()该签名不接受任何参数。
该方法，在前两种变体中，是.on( "mouseout", handler )的简写，在第三种变体中，是.trigger( "mouseout" )的简单写。
当鼠标指针离开一个元素时，mouseout事件会发送到这个元素上。任何HTML元素都可以接收这个事件。
举个例子，设想下面的HTML：
<div id="outer">
Outer
<div id="inner">
Inner
</div>
</div>
<div id="other">
Trigger the handler
</div>
<div id="log"></div>
该事件处理函数可以绑定到任何元素上：
$( "#outer" ).mouseout(function() {
$( "#log" ).append( "Handler for .mouseout() called." );
});
现在，当鼠标指针移出id="outer"的div时，消息会追加到<div id="log">要想人为触发该事件，请不带参数地应用.mouseout()方法：
$( "#other" ).click(function() {
$( "#outer" ).mouseout();
});
在执行代码之后，在“Trigger the handler”上点击，也将追加这条消息。
因为事件冒泡，这个事件类型可能导致很多令人头痛的问题。比如说，在本示例中，当鼠标指针移出id="inner"这个元素时，一个mouseout会发送到那里，然后冒泡到id="outer"这个元素。这可能在不适当的时候触发绑定的mouseout处理函数。参见对.mouseleave()的讨论以了解有用的替代方法。
其它说明
- 因为
.mouseout()方法是.on( "mouseout", handler )的简写，所以可以用.off( "mouseout" )来分离。
示例
显示mouseout事件和mouseleave事件被触发的次数。当鼠标指针移出子元素的时候，也会触发mouseout；与此同时，只有当鼠标指针移出绑定的元素的时候，才会触发mouseleave事件。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mouseout demo</title>
<style>
div.out {
width: 40%;
height: 120px;
margin: 0 15px;
background-color: #d6edfc;
float: left;
}
div.in {
width: 60%;
height: 60%;
background-color: #fc0;
margin: 10px auto;
}
p {
line-height: 1em;
margin: 0;
padding: 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="out overout">
<p>move your mouse</p>
<div class="in overout"><p>move your mouse</p><p>0</p></div>
<p>0</p>
</div>
<div class="out enterleave">
<p>move your mouse</p>
<div class="in enterleave"><p>move your mouse</p><p>0</p></div>
<p>0</p>
</div>
<script>
var i = 0;
$( "div.overout" )
.mouseout(function() {
$( "p:first", this ).text( "mouse out" );
$( "p:last", this ).text( ++i );
})
.mouseover(function() {
$( "p:first", this ).text( "mouse over" );
});
var n = 0;
$( "div.enterleave" )
.on( "mouseenter", function() {
$( "p:first", this ).text( "mouse enter" );
})
.on( "mouseleave", function() {
$( "p:first", this ).text( "mouse leave" );
$( "p:last", this ).text( ++n );
});
</script>
</body>
</html>
演示结果