ブラウジングメニューの改正作業について

関連エントリイリスト in this Blog

• 「階層メニュー」関連エントリイ一覧 in this Blog
• MyBlogの階層メニューについて

わがブラウジングメニュー ＝ 階層メニュー＋パンくずリスト のこれまでの問題点

このブログにおいては、各エントリイ閲覧、月別表示、検索結果表示などの各モードの時、マイブログ・エントリイ表示部の最上部にブラウジングメニューを表示している。（下図参照）

このブラウジングメニューは複合的な機能を有しており。左端部は「階層メニュー」、|| の右側は「パン屑リスト」となっている。

さて、これまで階層メニューの表示／非表示において、２つの大きな問題があった。最初にその内容をまとめておきたい。

文字列「▼Browsing MENU」には、沢山のイベントハンドラーが設置されている。まず、mouseover 時には直下に階層メニューを表示するハンドラーがあり、同時に当該メニューの使い方を説明するpopupを直上に表示するハンドラーも起動する。１のイベントに２つのイベントハンドラーがあるのだ。また当該要素からの mouseout イベント発生時には、これらの２つの表示結果を非表示するイベントハンドラーが設置されている。

更に、文字列「▼Browsing MENU」に設置されたmouseoverイベントハンドラーにより階層メニュー表示されるが、この階層メニューブロックにも、mouseover 時と mouseout 時にそれぞれ機能する別の２つのイベントハンドラーが設置されている。

これらのmouseover、mouseout時に動作する各種のイベントハンドラー関数によって、階層メニューの表示と隠蔽をコントロールしている訳だが、これまでは次の２つの問題を抱えていた。第一に、文字列「▼Browsing MENU」から階層メニュー部分以外にmouseoutした時に、既に表示されている階層メニューを非表示にすることが出来なかった。第二に、階層メニュー部分から文字列「▼Browsing MENU」にマウスカーソルが戻った時には、階層メニュー表示が消えてしまっていた。

そしてここ数年───。これらの不具合をどの様にすれば解消出来るのか、その方法が分からず、ずっと心の片隅に引っ掛かっていた。

ブラウジングメニューの改正点

さてこの度、上記の問題点の解消に多大な時間を費やし、やっと成功したので、ここに記録をまとめておきたい。

ブラウジングメニューが上記のような問題を抱えたまま巧く作動しないのは、Javascriptイベントハンドラー関数に問題があることは確実だった。しかし、果たしてどの部分が災いしているのか、それを判別し改正するのに多くの時間を割かざるを得なかった。

色々試行錯誤を重ねた結果、複数の様々な問題点が明らかになったが、その要点はイベントハンドラー関数の設定内容にあった。

第一の問題は、文字列「▼Browsing MENU」へのmouseoverイベントにより起動するイベントハンドラー関数＝階層メニュー表示関数（showCloneMenu()）内に、これまでに設置してあった当該階層メニューからのmouseoutイベントハンドラーの他に、新たに文字列「▼Browsing MENU」からのmouseoutイベントハンドラーを追加設置することにより解決した。

第二の問題の要点は、マウスカーソルを階層メニュー部分から文字列「▼Browsing MENU」の上に移動する際、連続して発生する複数のイベントのコントロールがうまく出来ていないことにあった。

その時にはmouseoutとmouseoverがほぼ同時に発生する。階層メニューからのmouseoutイベントの直後には、文字列「▼Browsing MENU」へのmouseoverイベントが起こる。

mouseoutイベントにより階層メニューは消えようとするが、直後に発生する文字列「▼Browsing MENU」へのmouseoverイベントにより、階層メニューは表示されようとする。しかし、直前に発生したmouseoutイベントの直後のmouseoverイベントによるハンドラーが起動しないのだ。

この瞬時に連続するイベントハンドラー起動は、そもそも仕様として機能しないものなのか、その点は明確ではないが、次のような設定を行えばよいと思いついた。それは階層メニューからのmouseout時に、通常は階層メニューを非表示にするのだが、マウスカーソルの行き先が文字列「▼Browsing MENU」の場合に限り、階層メニューを非表示にする関数を起動しないようにすれば良い、ということだ。

こうしてイベント発生時におけるマウスカーソルの移動元と移動先をスクリプト内で補足する必要に迫られた。

イベントターゲット：移動元要素と移動先要素

これらのアイテムは存在は知っていたが、これまで全く使用してこなかった。しかし、今回の問題を解決するに当たりどうしても使用せざるを得なくなった訳だ。

そこでIEの場合とMozilla系の場合に限って対応を調べた。IEの場合にはsrcElementとtoElementに分れているが、Mozilla系の場合にはmouseoverとmouseoutのそれぞれに応じて、移動元要素と移動先要素は異なる指定で行うことを初めて知った。その使い分けは以下の表の通りだそうだ。

Event type	DOM:event.target	DOM:event.relatedTarget
mouseover	the EventTarget which the pointing device entered	the EventTarget which the pointing device exited
mouseout	the EventTarget which the pointing device exited	the EventTarget which the pointing device entered

（上表は、DOM:event:Comparison of Event Targets - MDCから取得した。）

これらの調査の後に、階層メニューブロックからの移動先が、文字列「▼Browsing MENU」の場合に限って階層メニュを隠蔽しないように、スクリプトを改訂したのである。

以上により、ずっと懸案となっていた、我がブログ内の「バグ」退治を完了したのである。