Javascript 子单击事件触发父鼠标悬停事件

我有一个树状结构，鼠标在节点名上显示（UL）列表。列表中的每个项目都附加了一个单击事件。我面临的问题是，当我单击列表中的任何子项时，它会触发附加到父项span的mouseover事件。你们能帮我解决这个问题吗

<span id="treeNodeText">
<ul><li id="firstItem">First Item</li></ul>
</span>

---

在attachEvent函数中，我将事件附加到dom ID，并分配适当的回调函数

在单击之前触发

鼠标盖

事件。所以，除了延迟，你不能阻止它的处理

有一种方法可以解决这个问题：

var timer;
document.getElementById("treeNodeText").addEventListener('mouseover', function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
       // handle mouseover
    }, 400); // tune that delay (depending on the sizes of elements, for example)
});
document.getElementById("firstItem").addEventListener('click', function(){
    clearTimeout(timer); // prevents the mouseover event from being handled
    // handle click
};

---

在JavaScript中，事件会在DOM中冒泡。请阅读更多关于它的信息：或者

简言之，你可以让反常的事件冒泡而过

function callBackFunction(event){
  event.stopPropagation()
}

或

return false

还具有防止默认行为的效果，因此在技术上等同于：

function callBackFunction(event){
  event.stopPropagation()
  event.preventDefault()
}

---

这将有助于

您好，请粘贴您的代码鼠标悬停事件将在您单击之前触发。因此，除了延迟之外，您无法阻止它的处理。为什么要将块元素放在内联元素中？“Span”是内联元素，“ul”是块元素。如果在父元素上放置了

mouseover

事件，则在访问子元素时将触发该事件。如果不需要，请删除

mouseover

事件。AmGates，我正在使用span，因为使用DIV会干扰我的cssJan Dvorak，我需要在悬停在节点名称上时显示列表。所以我需要鼠标悬停在事件上。伙计们，正如D3EP4K所建议的，解决方案似乎是，当鼠标悬停在子UL列表项上时，从父跨度中移除鼠标悬停。我在mouseover上动态生成列表项，当列表生成并呈现时，我从范围中删除mouseover事件。它结束mouseover事件的作用域，子对象的click事件进入作用域。这不是问题所在，因为OP希望阻止父对象中的mouseover，而不是click。否，event.stopPropagation（）或返回false不起作用。看起来当我将鼠标悬停在列表项上时，“treeNodeText”上的鼠标悬停事件仍在范围内。我的第一个链接应该为您提供一些见解：您可能需要重新考虑一些标记。

function callBackFunction(event){
  return false
}

function callBackFunction(event){
  event.stopPropagation()
  event.preventDefault()
}

function myfunction(e){
  e.stopPropagation()
 e.preventDefault()
}