kawama.jp

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

カテゴリ: Ajax,JavaScript — タグ: , , , , — 2010年12月19日 22:44 — Comments (0)hatebu count

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

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

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

最初は

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

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

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

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

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

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

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

Copyright (C) 2002 - 2017 kawama All Rights Reserved. — Powered by WordPress