イベント処理( 3 )
最終更新日:

前へ 目次 次へ

 今回はイベント処理でも最も多いと思われるマウスイベントに関する食えない事情です。


 仮にレイア( div )の mouse over/out イベントを通知して欲しい時、 一般的には NN, IE共に 次のように記述します。

div.onmouseover = mouseoverFunc;
div.onmouseout  = mouseoutFunc;

 記述は同じですが動作は違います。 例えば、上の記述で指定したレイアが下のような構成だったらどうなるでしょうか。

Table
レイア( div )

 ここで、上のレイアを横切るようにマウスを操作すると登録したイベントは NN なら

onmouseover → onmouseout

となりますが、 IE では

onmouseover(DIV)   → onmouseout(DIV)   →
onmouseover(TABLE) → onmouseout(TABLE) →
onmouseover(TD)    → onmouseout(TD)    →
onmouseover(TABLE) → onmouseout(TABLE) →
onmouseover(DIV)   → onmouseout(DIV)

となります。

 この差は、両者のドキュメント( DOM ) に対する考え方の差のようです。
NNはドキュメントを立体的( 構造的 )に捉えているのに対し、 IEは平面的に捉えているように見えます。

Windows のタクスバーのようにマウスが来るとスライドし、 マウスが外れると元に戻るスクリプトを記述しようとした時 NN では単にレイアを移動するスクリプトを書けば良いだけですが、 IE ではそうはいきません。

イベントが発生した時、それがレイアの構成要素に移動したり 構成要素から移動したのかを判断する必要があります。

これは、非常に奇妙なことに思えます。

何故なら、イベントの登録自体は「このレイアのイベントを通知してくれ」と登録しているのに、 その構成要素のイベントの変化が通知されるのですから。

それに IE は NN とは違い、殆ど全てのタグに対して これらのイベントを登録できることを考えれば特にヘンです。
( レイアの構成要素のイベントが欲しければ、 該当のタグで指定すれば良いのですから。 )

この挙動にたいする対処方法は window.event のプロパティである fromElement, toElement, parentElement を使用して 本当は何が起こったのかを解析する必要があります。

それに、 fromElementtoElement は場合によっては、 値が設定されない場合(ウィンドウ外からマウスが進入して来た場合など) があるので、この場合の考慮も必要です。
( IE5 では恐くて試してませ〜ん f(^^; )

また、これを解析するには登録イベントのネストの可能性がある場合には、 IE のイベントオブジェクトのデータだけでは どの登録に対するイベントか 判断できないので、更に工夫が必要になります。 (-_-;

 onmouseover/out のように高頻度で呼出される可能性のある処理で、 スクリプト側で、このような処理をするとハンドラの処理が重くなり、 イベント抜けが発生しやすくなり、更に工夫が....

なんて、考えると泥沼に落ちることになりますので、程々に。 なんと言っても IE ですから... f(^^;

前へ 目次 次へ


Copyright(c) 1999 ShinSoftAll rights reserved.