締切済み

mouseoutで処理が連続発生するのを防ぐには？

2008/03/26 21:14

JavaScriptを利用した、ドロップダウンメニューを作成したのですが、mouseout処理を中に加えて展開していると常にmouseoutに反応してしまう状況が起きています。構成上はこのようになっています。 <div>→position:absolute処理、display:block処理、mouseout処理を設定 <h3>テキスト</h3> <p><a href="">リンク</a><a href="">リンク</a><a href="">リンク</a><a href="">リンク</a><a href="">リンク</a><a href="">リンク</a></p> </div> この状況下で、メニュー部にあたる箇所(H3、P、Aそれぞれのタグ)へ移動を行うとmouseout処理が走り最悪オーバーフローを起こします。そこで、HTMLにCSS/JavaScriptのソースコードを埋め込まないDOM対応で、DIVタグのみにmouseout処理を加えてすべての異常なmouseout処理を起こさない様にするにはどうしたらいいでしょうか？よろしくお願いいたします。

uzukit
お礼率44% (4/9)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

みんなの回答

arexis
ベストアンサー率66% (66/99)

2008/03/27 10:02 回答No.1

<html> <head> <script type="text/javascript"> document.onmouseover = function(e){ if(!e){ e = window.event } //メソッドによるイベント付加なら不要 var el = e.srcElement || e.target; var root = el; while(root){ if(root.className == 'downlist'){ return; } root = root.parentNode; } /* ここから下はドロップダウンメニュー外にカーソルがある状態 */ /* 構造によりけりで処理色々必要。 elがイベント発生エレメント。 */ alert(1) } </script> </head> <body> <div id="d1" class="downlist" style="border:1px solid"> <h3>テキスト</h3> <p> <a href="">リンク</a> <a href="">リンク</a> <a href="">リンク</a> <a href="">リンク</a> <a href="">リンク</a> </p> </div> </body> </html> mouseoutを利用して質問者さんの希望通りにさせる方法がちょっと思いつかないので documentのマウスオーバー監視にしてみては？マウスオーバーでカーソル位置がドロップダウンリスト上にあるか？を確認してドロップダウンリストと関係ない場所ならドロップダウンリストを非表示に。非表示にする対象は、表示時に変数に格納させて置いて取ればよいです。あとは、ドロップダウンを表示させる元エレメントとドロップダウンの位置や距離の問題とかマウスオーバーにどのタイミングで何をさせるか？など色々調整は必要です。元ソースが無いですし理屈上と言う事で。

ログインすると、全ての回答が全文表示されます。