stopPropagation（）およびcancelBubbleにもかかわらず、子プロセスが引き続きトリガーしているイベント

私は、ヘッダーをメニューにフェードするonmouseoverイベントを持つ要素（私のページヘッダーを含む）を持っています。また、その逆を行うonmouseoutイベントがあります。メニュー自体は単にリンクと画像の束です。マウスが入ると、期待どおりに消えます。しかし、内のマウスを<div>内に移動すると、onmouseoutイベントは、私が残している要素によってトリガされ、続けて入力している要素のonmouseoverイベントがトリガされます。 stopPropagationとcancelBubbleを使用してこれを停止しようとしましたが、役に立たないです。stopPropagation（）およびcancelBubbleにもかかわらず、子プロセスが引き続きトリガーしているイベント

のJavascript（menu.jsに格納されている）：

//These two functions are for rendering the menu. 
//Fade is a function that fades an element out or in by 
//changing the opacity of the element. 

function renderHeader() { 
fade('menu'); 
setTimeout("document.getElementById('menu').innerHTML=\ 
\"<img src='menu_1.png' width=20% /><img src='menu_2.png' width=20% />\ 
<img src='menu_3.png' width=20% /><img src='menu_4.png' width=20% />\ 
<img src='menu_5.png' width=20% />\"",TimeToFade+33); 
setTimeout("fade('menu')",TimeToFade+66); 
} 

function renderMenu() { 
fade('menu'); 
setTimeout("document.getElementById('menu').innerHTML=\ 
\"<a href='home.asp'><img src='menu_a.png' width=20% /></a>\ 
<a href='members.asp'><img src='menu_b.png' width=20% /></a>\ 
<a href='locations.asp'><img src='menu_c.png' width=20% /></a>\ 
<a href='about.asp'><img src='menu_d.png' width=20% /></a>\ 
<a href='services.asp'><img src='menu_e.png' width=20% /></a>\"",TimeToFade+33); 
setTimeout("fade('menu')",TimeToFade+66); 
} 


//These two functions are responsible for stopping the propagation. 
function load() { 
    element = document.getElementById("menu"); 
    element.addEventListener("mouseover", stopEvent, false); 
    element.addEventListener("mouseout", stopEvent, false); 
} 

function stopEvent(ev) { 
    if (!ev) var ev = window.event; 
    ev.cancelBubble = true; 
    if (ev.stopPropagation) ev.stopPropagation(); 
}

HTML（要素が最初にヘッダを示す）：

<head> 
... 
<script type="text/javascript" src="Scripts/menu.js"></script> 
</head> 

<body onload="load();"> 
<div id='menu' style="opacity:1;filter:alpha(opacity=100);height:150px" 
onmouseover="renderMenu()" onmouseout="renderHeader()"> 
<img src='menu_1.png' width=20% /><img src='menu_2.png' width=20% /> 
<img src='menu_3.png' width=20% /><img src='menu_4.png' width=20% /> 
<img src='menu_5.png' width=20% /></div>

出典

2011-07-18 err1100

実際には、実際の機能でタイムアウトを設定することを検討してください。（ "setTimeout（）"の最初の引数は、関数であり、文字列でなければなりません。つまり、 – Pointy

ありがとうございます。私はそれが可能であるかどうかはわかりませんでした。いずれにせよ、私はこの時点でjQueryに切り替えたので、もうsetTimeoutは使用していません。 – err1100

のstopPropagation（）缶cancelBubble（）ここで関連するコードであります子どもから祖先まで泡立ちを止めないでください。泡立ちが始まることは決してありません。最終的にあなたのメニュー要素にバブリングするのは、メニュー内の要素上のmouseoverおよびmouseoutイベントです。私はこのような何かがあなたのために働くかもしれないと思う：

function load() { 
    elements = document.getElementById("menu").getElementsByTagName('*'); 
    elements.addEventListener("mouseover", stopEvent, false); 
    elements.addEventListener("mouseout", stopEvent, false); 
}

また、あなたがたsetTimeout内の文字列を使用すべきではありません。あなたの文字列は関数を渡すだけでは非常に遅いeval（）を得る。特にあなたのもののような長い文字列。必要なのは：

function renderHeader() { 
fade('menu'); 
setTimeout(function(){ document.getElementById('menu').innerHTML=\ 
"<img src='menu_1.png' width=20% /><img src='menu_2.png' width=20% />\ 
<img src='menu_3.png' width=20% /><img src='menu_4.png' width=20% />\ 
<img src='menu_5.png' width=20% />"; },TimeToFade+33); 
setTimeout(function(){ fade('menu'); },TimeToFade+66); 
} 

function renderMenu() { 
fade('menu'); 
setTimeout(function(){ document.getElementById('menu').innerHTML=\ 
"<a href='home.asp'><img src='menu_a.png' width=20% /></a>\ 
<a href='members.asp'><img src='menu_b.png' width=20% /></a>\ 
<a href='locations.asp'><img src='menu_c.png' width=20% /></a>\ 
<a href='about.asp'><img src='menu_d.png' width=20% /></a>\ 
<a href='services.asp'><img src='menu_e.png' width=20% /></a>"; },TimeToFade+33); 
setTimeout(function(){ fade('menu'); },TimeToFade+66); 
}

出典

2011-07-18 20:04:08 Paulpro

ああ！ありがとうございました。私は伝えていることを誤解していました。これはイベント自体であり、イベントハンドラではありません。いずれの場合でも、あなたのソリューションは私のためには機能しませんでした。私はjQuery（これほど簡単！）に切り替えましたが、まだ動作していません。ちょうどそれをカバーするこれらの2つの行（頭の中）ではいけませんか？ '$（" * "）。mouseenter（function（event）{event.stopPropagation（）;}）; – err1100

また、.live（）と.bind（）を使ってみましたが、どちらも動作していません。（） bind（ "mouseenter mouseleave"、function（event））; $（ "*"）を実行すると、 {event.stopPropagation（）;}）; '。マウスオーバーやマウスアウトでも機能しません。 – err1100

問題は、「メニュー」要素の外側にのみハンドラーを接続していることです。ハンドラが伝播をキャンセルするということは問題ではありません。その時までにはそれは遅すぎる。

代わりにできるのは、イベントの「ターゲット」プロパティをチェックし、それが正しい要素であるときにのみ応答することです。

出典

2011-07-18 20:05:38 Pointy

先端ありがとう、Pointy。上記の答えのコメントでわかるように、私は今jQueryに切り替えましたが、まだ同じ問題があります。 – err1100

さて、@ err1100、ハンドラをどうバインドするかは関係ありません。それはブラウザが何をしているので、あなたはまだ泡立つイベントを取得します。 – Pointy

私はそれを理解しています。現在の問題の説明についてはPaulPROの答えに対する私のコメントを参照してください。 – err1100

stopPropagation（）およびcancelBubbleにもかかわらず、子プロセスが引き続きトリガーしているイベント

答えて

関連する問題