みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

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">
<!--
window.onload = function ()
{
Event.observe( $("box1"), "mouseout",out,true );
}

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

$("tt").innerHTML = e.id+"からmouseout<br />"+$("tt").innerHTML;

Event.stop(e)
}

// --></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>

投稿日時 - 2009-06-15 20:35:10

QNo.5046880

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

<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>

投稿日時 - 2009-06-15 21:17:20

お礼

なるほど、領域外にロールオーバーしたとき・・・と考えるのですね。
いただいたコードを元に、以下のように 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;

}

投稿日時 - 2009-06-16 10:27:42

あなたにオススメの質問