0

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

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

我的代码是这样的：我有 conman 事件附加方法：

attachEvents(domId,eventType,callBackFunction,otherParams)

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

4

3 回答 3

1

在您单击之前mouseover触发该事件。因此，除了延迟之外，您无法阻止其处理。

这是处理该问题的一种方法：

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
};
于 2013-10-07T08:44:55.957 回答
1

在 JavaScript 中，事件在 DOM 中冒泡。请阅读更多相关信息：事件顺序和传播或preventDefault/stopPropagation。

简而言之，您可以通过以下方式阻止事件冒泡

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

或者

function callBackFunction(event){
  return false
}

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

function callBackFunction(event){
  event.stopPropagation()
  event.preventDefault()
}
于 2013-10-07T09:07:44.280 回答
0 
function myfunction(e){
  e.stopPropagation()
 e.preventDefault()
}

这会有所帮助

于 2013-10-07T09:11:23.043 回答