デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.mouseout( )マウスカーソルが要素内(子孫要素を含む)から出た時の処理を設定

構文

マウスカーソルが要素内(子孫要素を含む)から出た時の処理を設定返値:jQueryオブジェクト
jQo.mouseout( function )ver1.0〜
jQo.mouseout( )ver1.0〜
jQo.mouseout( object, function )ver1.4.3〜

機能

jQueryオブジェクトで指定した要素内からマウスカーソルが出た時に引数のfunctionを実行します。引数にfunctionを設定しない場合は、要素に設定(バインド)されたfunctionを実行します。

ver1.4.3からは引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます(データはイベントオブジェクトのdataプロパティ経由で渡されます)。

指定した要素内に子孫要素がある場合、子孫要素からマウスカーソルが出た際にもfunctionが実行されることに注意してください。子孫要素に反応させたくない場合はmouseleaveメソッドを利用してください。

※以降「マウスカーソルが要素内(子孫要素を含む)から出た」動作のことをマウスアウトと呼びます。

解説

マウスアウトで実行する処理を設定

サンプル(mouseout/01.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、mouseoutメソッドの引数にfunctionの「outFunc」が設定されています。

$(function () {
	$("button").mouseout(outFunc);
});

mouseoutメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(イベントオブジェクト)を受け取ります。そしてマウスアウトしたら実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。

mouseoutに設定するFunctionの構文
function 任意の名前(イベントオブジェクト){
 マウスアウトで実行したい処理
}

サンプルmouseout/01.htmlで利用したoutFuncは以下の様になっており、アラートで「mouseout」と表示するだけです。このサンプルでは引数(イベントオブジェクト)は利用していません。

function outFunc(eo){
	alert("mouseout");
}
結果として、div要素にマウスアウトするとアラートで「mouseout」と表示されます。
イベントのfunction設定は、無名関数を利用することが多いです。→サンプル(mouseout/01b.html

$("button").mouseout(function(){
	alert("mouseout");
})

他の要素に設定されたマウスアウト時の処理を実行する

mouseoutメソッドは引数を設定しないと、要素に設定されたマウスアウト時の処理を実行します。
サンプル(mouseout/02.html)を開いてbody内にbutton要素とdiv要素があることを確認してください。

続いてjQueryを確認してください。div要素に設定されたマウスアウト時の処理はmouseout/01b.htmlと同じですが、以下の処理が追加されています。この処理によってbuttonをクリックするとdiv要素に設定されたマウスアウト時の処理が実行されます。

$("button").click(function(){
	$("div").mouseout();
})

結果として、buttonを「クリック」するとdiv要素から「マウスアウト」したのと同じようにアラートで「mouseout」と表示されます。

objectオブジェクトをfunctionに渡す

第1引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます。データはイベントオブジェクトのdataプロパティを介して渡されます。サンプル(mouseout/03.html)を開いてbody内の構成はmouseout/01.htmlと同じ事を確認してください。

jQueryは以下の様に記述され、mouseoutメソッドの第1引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されています。このデータはイベントオブジェクト(eo)を通してfunctionに渡され、dataプロパティの値として取得できます。

$("div").mouseout({test:10},function(eo){
	alert(eo.data.test);
})

結果として、div要素からマウスアウトすると第1引数で渡されたtestプロパティの値「10」がアラートで表示されます。

子孫要素にも反応します

mouseoutメソッドは子孫要素からマウスアウトしたときもイベントを受け取ります。
サンプル(mouseout/04.html)を開いてbody内にdiv要素が入れ子になって配置(外側はoutのid属性、内側はinのid属性)されていることを確認してください。

<div id="out">
	<div id="in"></div>
</div>

jQueryは以下の様に記述され、mouseout/01b.htmlとはセレクタが違うだけです。

$("#out").mouseout(function(){
	alert("mouseout")	
});

セレクタに「#out」を設定しているので、外側のdiv要素(outのid属性)からマウスオーバーした際「mouseover」と表示されるのは良いのですが、セレクタで指定されていない内側のdiv要素(inのid属性)からマウスアウトした際も「mouseout」と表示されますoutのdiv要素からinのdiv要素に入るときも「mouseout」と表示されます。これはoutのdivからマウスアウトしたためです。

イベントフローと合わせて覚えておくと良いでしょう→参考:使い方「イベントフロー(1)」

関連項目

マウスカーソルが要素内(子孫要素を含む)に入った時の処理を設定したい場合はmouseoverメソッドを利用します。

メモ

mouseleaveメソッドとの比較

mouseleaveイベントはバブリングしないため子要素で発生したイベントは親要素に伝わりません。ですので子孫要素に反応させたくない場合はmouseleaveメソッドを利用します。

サンプル(mouseleave/04.html)を開いて以下の様にmouseoutメソッドがmouseleaveメソッドに変更されているのを確認してください。

$("#out").mouseleave(function(){
	alert("mouseleave")	
});

このようにmouseleaveメソッドを利用すれば、子孫要素(内側の黄色いdiv要素)からマウスアウトしてもアラートが出ません。こちらのメソッドのほうが利用しやすいと思います。