onMouseoutの有効な範囲

初期状態：aaaという文字のみ表示
動作：aaaをクリックするとその下にbbb,cccというリンクが現れ、これら（aaa,bbb,cccの領域）からマウスアウトしたら、bbb,cccが消える

というものを作る為に、以下のコードを書いてみました。

<div onMouseout="this.childNodes[1].style.display='none'"><p onClick="this.parentNode.childNodes[1].style.display='block'">aaa</p><ul style="display:none;"><li><a href="#">bbb</a></li><li><a href="#">ccc</a></li></ul></div>

「ブラウザによりノードのカウント方法が異なり挙動が変わる」のを防ぐために改行をなくしましたが、見やすくするとこうなります↓

<div onMouseout="this.childNodes[1].style.display='none'">
<p onClick="this.parentNode.childNodes[1].style.display='block'">aaa</p>
<ul style="display:none;">
<li><a href="#">bbb</a></li>
<li><a href="#">ccc</a></li>
</ul>
</div>


これを実際に試してみると、aaaを押してリンクbbb,cccが出てきたのは良いものの、
リンクをクリックするためにマウスをbbb,cccへ移動しようとすると、
aaaから離れた時点でbbb,cccが消えてしまいます。

「div全体に」”マウスアウトしたらbbb,cccが消える”というつもりで上記のソースを書いたのですが、
divのonMouseoutはpからマウスアウトしても働いてしまうのでしょうか。

どのように修正したらよいか試行錯誤中です。

解決策があれば、どうぞよろしくお願いします。

No.1 ベストアンサー 回答者： 0909union 回答日時： 2011/04/20 13:29

それぞれのオブジェクトにbackgroundで背面に色をつけると、なんでだめなのかわかります。

たぶん、イベントバブルを理解していないのと、on mouse out, over, enterの発生トリガーと順番が理解していなことが、理解できていないのでしょう。

下層下位があるオブジェクトではイベントトラップ（ドリブン）を設定してあるオブジェクトの境目で、発生します。それと上記のように、大きさを何も指定していないで、元の大きさを超えてのオブジェクトの動的挿入は、誤動作を起こします。

十分自分でデバックしてみてください。じゃないと動作が理解できないと思います。

なので、回答しても、またさらにそれに対して質問する方が多く（自分で理解しようとしていない）、私はここまでにします。

ヒントとしては、存在が消えてしまうDISPLAYではなくVisvi...を使うのと、out , overなどを組み合わせる事です。

発生したときにalert(this.tagName)などと発生場所を表示する、または object.innerText = object.innerText + this.idなどと、順番を記録するDIVを作って表示すれば、順番がわかります。

イベントはオブジェクトの境目、階層があるときは、上から下へ起きていますが(mouseoverなど)、実は発生場所から上へも、イベントは伝播（これをバブルと言う）します。

オブジェクトに色をつけたり、発生を書き込み事で、目に見えるようにすれば、よく理解できるようになります。

この回答への補足

ありがとうございました！

色々学習した結果、コード的には「event.cancelBubble=true」を加えるのが一番シンプルかと思いました。

ありがとうございました！

補足日時：2011/04/20 20:47

この回答へのお礼

ありがとうございます！

heightを与えていなかったり、displayも原因かな？と思っていたところでした。


背景に色を塗ったり、alertで状態を確認したり、色々試してみます。

お礼日時：2011/04/20 13:57

No.2 回答者： fujillin 回答日時： 2011/04/20 15:20

子要素で発生したイベントが親要素に伝わっていく（バブリング）からです。

p要素でのmouseoutイベントがdivにも伝播するので、そのためにdivに設定した処理が実行されています。

詳しい説明は以下を
　http://vird2002.s8.xrea.com/javascript/DOM-Level …
　http://wiki.bit-hive.com/tomizoo/pg/JavaScript%2 …
　http://uhyohyohyo.sakura.ne.jp/javascript/3_3.html

もすこし詳しくは
　http://www.ibm.com/developerworks/jp/xml/library …
　http://www2u.biglobe.ne.jp/~oz-07ams/prog/xml-ev …


そのまま予定の動作にするには、onclickのイベント処理の中に、イベント発生元を調べてdiv要素以外だったら処理をしないような分岐を追加すればよろしいかと。

この回答への補足

ありがとうございました！

色々学習した結果、コード的には「event.cancelBubble=true」を加えるのが一番シンプルかと思いました。



ベストアンサーは、時系列的に、最初に下さった方にさせていただきましたが、どちらも良かったです。非常に参考になりました。



ありがとうございました！

補足日時：2011/04/20 20:48

この回答へのお礼

ありがとうございます！
JavaScript初心者なので、勉強になります。

一見単純そうで、実は結構多くのことが学べますね。

お礼日時：2011/04/20 16:34