Javascript 尽管StopRopAgation（）和cancelBubble，子级仍会触发事件

我有一个元素（包含我的页眉），它有一个onmouseover事件，将页眉淡入菜单。它还有一个onmouseout事件，它执行相反的操作。菜单本身只是一组链接和图像。当鼠标进入屏幕时，它会像预期的那样消失。但是，当我在

中的元素之间移动鼠标时，我要离开的元素会触发onmouseout事件，然后是我要输入的元素的onmouseover事件。我曾尝试使用StopRopagation和cancelBubble来停止此操作，但没有效果。以下是相关代码：

Javascript（存储在menu.js中）：

//这两个函数用于呈现菜单。
//淡入淡出是通过以下方式淡出或淡入元素的功能：
//更改元素的不透明度。
函数renderHeader（）{
淡出（“菜单”）；
setTimeout（“document.getElementById（'menu'））.innerHTML=\
\"\
\
\“”，TimeToFade+33）；
设置超时（“淡入（“菜单”），TimeToFade+66）；
}
函数renderMenu（）{
淡出（“菜单”）；
setTimeout（“document.getElementById（'menu'））.innerHTML=\
\"\
\
\
\
\“”，TimeToFade+33）；
设置超时（“淡入（“菜单”），TimeToFade+66）；
}
//这两个函数负责停止传播。
函数加载（）{
元素=document.getElementById（“菜单”）；
元素。addEventListener（“mouseover”，stopEvent，false）；
元素。addEventListener（“mouseout”，stopEvent，false）；
}
功能停止事件（ev）{
如果（！ev）var ev=window.event；
ev.cancelBubble=true；
如果（ev.stopPropagation）ev.stopPropagation（）；
}

HTML（元素最初显示标题）：

...

stopPropagation（）可以取消泡泡（）停止冒泡，从孩子到祖先都不会冒泡，因为冒泡从一开始就不会发生。菜单中的元素上的mouseover和mouseout事件最终会冒泡到菜单元素。我想这样的事情可能适合你：

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

另外，您不应该在setTimeout中使用字符串。您的字符串得到eval（）'d，这与只传入函数相比非常慢。特别是像你的一些长线。你想要：

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);
}

函数rendereader（）{
淡出（“菜单”）；
setTimeout（函数（）{document.getElementById（'menu'）。innerHTML=\
"\
\
“；}，TimeToFade+33）；
setTimeout（函数（）{fade（'menu'）；}，TimeToFade+66）；
}
函数renderMenu（）{
淡出（“菜单”）；
setTimeout（函数（）{document.getElementById（'menu'）。innerHTML=\
"\
\
\
\
“；}，TimeToFade+33）；
setTimeout（函数（）{fade（'menu'）；}，TimeToFade+66）；
}

问题在于您只将处理程序附加到外部“菜单”元素。它的处理程序取消传播这一事实并不重要；到那时已经太晚了

---

你可以做的是检查事件的“目标”属性，只有当它是正确的元素时才做出响应。

你真的应该考虑用实际函数设置超时调用。（换句话说，“setTimeout（）”的第一个参数应该是函数而不是字符串。）谢谢。我不知道这是可能的。无论如何，我现在已经切换到jQuery，所以我不再使用setTimeout了。噢！非常感谢。我误解了正在传播的东西。这是事件本身，而不是事件处理程序。无论如何，你的解决方案对我不起作用。我已经切换到jQuery（简单多了！），但它仍然不起作用。这两条线（在头部）不应该刚好覆盖它吗<代码>$（“*”）.mouseenter（函数（事件）{event.stopPropagation（）；}）；$（“*”）.mouseleave（函数（事件）{event.stopPropagation（）；}）我还尝试使用.live（）和.bind（），但它们都不起作用-

$（“*”）.live（“mouseenter mouseleave”，function（event）{event.stopPropagation（）；}）

和

$（“*”）.bind（“mouseenter mouseleave”，function（event）{event.stopPropagation（）；}）。它们也不适用于mouseover和mouseout。谢谢你的提示，尖头。正如您在上面答案中的评论中所看到的，我现在已经切换到jQuery，但仍然存在相同的问题。@err1100，如何绑定处理程序并不重要。你仍然会看到事件冒泡，因为浏览器就是这么做的。我理解这一点。有关当前问题的描述，请参见我对PaulPRO答案的评论。
function load() {
  elements = document.getElementById("menu").getElementsByTagName('*');
  elements.addEventListener("mouseover", stopEvent, false);
  elements.addEventListener("mouseout", stopEvent, false);
}

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);
}