05 | 2017/06 |  07

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

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

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

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

ブラウジングメニュー縮小画像

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

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

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

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

これらのmouseover、mouseout時に動作する各種のイベントハンドラー関数によって、階層メニューの表示と隠蔽をコントロールしている訳だが、これまでは次の2つの問題を抱えていた。第一に、文字列「▼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」の場合に限って階層メニュを隠蔽しないように、スクリプトを改訂したのである。

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

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/497-42300661

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200706031859
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。