jqueryのhoverイベントをunbindする

jqueryを使っていて、hoverイベントをunbindすることがありました。

が、hoverは他のイベントと違って

$('#hoge').unbind('hover');

のようにはできません。

さてどうしたものか、、、と思ってググると以下のページを見つけました。

http://d.hatena.ne.jp/tilfin/20080615/1213608859

先に答えだけ書いてしまうと、

$("#hoge").unbind("mouseenter").unbind("mouseleave");

このようにすることで目的は達成できます。

それよりもこの記事自体、マウスイベントについてかなり深く掘り下げているので勉強になりました。

こちらの公式のデモも参考になります。
http://api.jquery.com/mouseover#example-0

jqueryのhover()でプルダウンメニューを作る

仕事でプルダウンメニューを作った際のメモ。

jqueryを使ってちょっとしたプルダウンメニューを作りました。

サンプル：jqueryのhoverでプルダウンメニュー

最初は

$('#menu').mouseover(function(){ ...処理... }).mouseout(function(){ ...処理... });

という具合に、mouseoverとmouseoutのメソッドチェーンを使ってみました。

これでも問題ないように見えましたが、実際に作ってみるとカーソルをメニュー要素からプルダウン要素に動かすと、その都度mouseoverの処理が走ってしまうということがわかりました。

ただのプルダウンメニューであれば問題ないかもしれませんが、メニューの表示にajaxでのHTTPリクエストを入れていたので、パフォーマンスの点で問題があります。というか使いものになりません。
サンプルにconsole.logを仕込んであるので、実際にマウスを動かしながらfirebugのコンソールを見ると現象がよくわかると思います。

そこで今度はhoverメソッドを使ってみたのですが、こちらはカーソルをグリグリ動かしても処理は１度しか走りませんでした。

挙動が違う理由はよくわかりませんが、とりあえずhoverを採用して無事実装完了しました。