開発日誌

jQueryのロールオーバー/ロールアウトイベントとバブリング

引き続きjQueryの勉強をしていきたいと思います。

[今までのjQuery関連記事]
jQueryではじめるJavaScript
http://lab.gpol.co.jp/tsubo/2010/01/jqueryjavascript.php
jQueryではじめるJavaScript : セレクター操作
http://lab.gpol.co.jp/tsubo/2010/08/jqueryjavascript-1.php
jQueryではじめるJavaScript : 処理1
http://lab.gpol.co.jp/tsubo/2010/10/1015jqueryjavascript.php
jQueryではじめるJavaScript : ボールを動かしてみる
http://lab.gpol.co.jp/tsubo/2010/12/124jqueryjavascript.php

jQueryにはロールオーバーイベントに、mouseover と mouseenter、ロールアウトイベントに、mouseout と mouseleave の二つがあります。
その違いを説明します。

下の図のように"色のついたエリア"にロールオーバー/ロールアウトイベントをつけて、マウスを縦断させてみました。


・mouseover / mouseout
before.jpg

マウスオーバー/マウスアウトの場合
1."赤エリア"に入ったとき[in red]
2."緑エリア"に入ったとき[out red][in green][in red]
3."青エリア"に入ったとき[out green][out red][in blue][in green][in red]
  :

これは予想外のいっぱいイベントが起きるので注意してください。
これはバブリングという仕組みで子供で発生したイベントが親に伝播するようになっています。
正直いって使いづらいのでそういう時は下のmouseenter/mouseleaveを使いましょう。

ちなみにバブリングはEvent.stopPropagation()でとめる事もできます。


・mouseover / mouseout stopPropagation() を使用
out.JPG


1."赤エリア"に入ったとき[in red]
2."緑エリア"に入ったとき[out red][in green]
3."青エリア"に入ったとき[out green][in blue]


・mouseenter / mouseleave
after.jpg

1."赤エリア"に入ったとき[in red]
2."緑エリア"に入ったとき[in green]
3."青エリア"に入ったとき[in blue]

やりたいことにもよりますが、jQueryのmouseenter/mouseleaveイベントが使い勝手意が良いですね。

(teruhisa)




Webシステムのツボとは

オープンソースの紹介や、プログラミング講座、フリーソフトのレビューなど、Webエンジニアが送る、つれづれ日記。
【隔週金曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive