js STUDIO

.mouseout()

要素のmouseoutイベントにバインドします。また、mouseoutイベントを実行します。

このメソッドは、1つ目と2つ目は.bind('mouseout', handler)への、3つ目は.trigger('mouseout')への ショートカットです。

mouseoutイベントは対象要素内からマウスポインタが出ていった際に、イベント通知を行います。 ほとんどの要素でこのイベントを受け取る事が可能です。

mouseoutイベントはイベントバブルを処理する方法がmouseleaveと異なります。 詳細はデモをご覧ください。

.mouseout( handler(eventObject) ) 1.0追加

戻り値:jQuery

要素のmouseoutイベントにバインドします。また、mouseoutイベントを実行します。

引数 説明
handler(eventObject) イベントが発生した際に、実行したい処理を関数として指定します。

.mouseout( [eventData], handler(eventObject) ) 1.4.3追加

戻り値:jQuery

要素のmouseoutイベントにバインドします。また、mouseoutイベントを実行します。

引数 説明
[eventData] マップ値を指定することで、データをイベントハンドラーに渡すことが出来ます。
handler(eventObject) イベントが発生した際に、実行したい処理を関数として指定します。

.mouseout() 1.0追加

戻り値:jQuery

mouseoutイベントを発生させます。

デモ

mouseoutとmouseleaveが発生した回数を示すテキストに注目してください。 mouseoutは対象要素とその子要素に対してマウスが要素上に乗る度にイベントが発生しますが、 mouseleaveは対象要素のみでしかイベントを発生させません。 

<!DOCTYPE html>
<html>
<head>
<style>
div.out {
  width:40%;
  height:120px;
  margin:0 15px;
  background-color:#D6EDFC;
  float:left;
}
div.in {
  width:60%;
  height:60%;
  background-color:#FFCC00;
  margin:10px auto;
}
p {
  line-height:1em;
  margin:0;
  padding:0;
  border: dotted 1px #FF0000;
}
</style>
<script src="http://code.jquery.com/jquery-latest.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").bind("mouseenter",function(){
    $("p:first",this).text("mouse enter");
  }).bind("mouseleave",function(){
    $("p:first",this).text("mouse leave");
    $("p:last",this).text(++n);
  });
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM