jQueryでスムーズに動く階層型ナビメニューしたいとき、jsの感覚でonmouseout , onmouseoverで処理しようとすると、難儀してしまう事がある。
まず、思っても見ないイベントが大量に発生して、収拾がつかなくなる。これは、この両者が子要素の出入りもチェックしているから。
つまり、自分の家の中の、部屋の出入りもまたイベントを発生させる。
これを防ぐには、onmouseleave , onmouseenter を使うとスッキリする。
こうすれば、家の中に入った時、出た時しかチェックしない。
もうひとつ、にゅるっと出てくるサブメニューなどは、クリック要素の子要素としてマーキングすること。そうしないと、にゅるっと出て来るはずが、「外に出た」イベントが発生してと要素が消えてしまったりしてしまう。サブメニューであっても、「家の中」にしておく。
こんな基本的な事でも、やはりタマに使うだけなので忘れてしまうorz
実証サイト
http://stacktrace.jp/jquery/api/events/mouseleave%28fn%29.html
コメント