Event.observeで、入れ子divタグでのmouseoutイベントについて

締切済

質問者：po-w
質問日時：2009/06/15 20:35
回答数：1件

box1の中にbox2、box2の中にbox3と入れ子になったDIVタグがあります。
box1の外側へカーソルが外れた際にイベント発生させたくて以下のような
コードを用意しましたが、box1の内側へカーソルを移動し、box2へカーソルが重なった時にもイベントが発生してしまいます。
box1の外側に外れたときだけイベントが発生するようにしたいのですが、どのように記述したらよいのでしょうか？
また、入れ子になったbox2、3でイベントが発生しないよう、イベントを発生させたいオブジェクトとイベントが発生したオブジェクトを比較していますが、もっとスマートな方法はあるのでしょうか？
ご助力お願いいたします。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>mouseout</title>

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript">
</script>
<style>
#box1{ background: #ccc; padding: 10px; }
#box2{ background: #ddd; padding: 10px; }
#box3{ background: #eee; padding: 10px; }
</style>
</head>
<body>
<h1>mouseout</h1>

<div id="box1" class="parent">ボックス1
<div id="box2">ボックス2
<div id="box3">ボックス3</div>
</div>
</div>

</div>
</body>
<div id="tt"></div>

</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： babu_baboo
回答日時：2009/06/15 21:17

<script type="text/javascript">

//@cc_on
document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/
　'mouseover', function (evt) {
　　var e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/;
　　var p = getParent(e, 'id', 'box1');

　　if (! p && this.f) {
　　　alert('でた～');
　　　this.f = false;
　　}
　　if (p) this.f = true;
　}, false);
　
function getParent(node, type, val) {
return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null;
}

</script>

- 0
- 件

通報する

この回答へのお礼

なるほど、領域外にロールオーバーしたとき・・・と考えるのですね。
いただいたコードを元に、以下のように prototype.js を使用したコードへ作り直してみました。
ありがとうございます。

window.onload = function ()
{
document.observe( "mouseover", out );
}

function out(event)
{
var p = Event.findElement(event,'div.parent');
var e = Event.element(event);

if( !p && this.f )
{
alert("で、でたー");
this.f = false;
}

if( p ) this.f = true;

}