孩子点击事件触发父鼠标悬停事件

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

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

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

attachEvents(domId,eventType,callBackFunction,otherParams)

在的attachEvent功能我将事件附加到DOM ID和分配适当的回调函数

来源

2013-10-07 A.R

嗨，你可以请粘贴你的代码 – AmGates

在你点击之前，mouseover事件被触发**。所以，除了拖延，你不能阻止它的处理。 –

为什么要在块内嵌入元素？ “跨度”是内联元素，“ul”是块元素。 – AmGates

的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-07 08:44:55

我这样做了，但它不起作用。 –

@AsadRaza请检查更新 –

Jan Dvorak，我需要显示悬停在节点名称上的列表。所以我需要鼠标悬停事件。 –

在JavaScript中，事件冒泡的DOM。请阅读更多关于它的信息：event order and propagation或preventDefault/stopPropagation。

总之，你可以pervent事件通过

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

或

function callBackFunction(event){ 
    return false 
}

return false还具有防止默认行为的效果气泡，所以它的技术上等同于：

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

来源

2013-10-07 09:07:44 whitehat101

这不是问题，因为OP想阻止在父项中的鼠标悬停，而不是点击。 –

不，event.stopPropagation（）或返回false不起作用。看起来像当我悬停在列表项上鼠标悬停在“treeNodeText”事件仍然在范围内。 –

我的第一个链接应该为您提供一些见解：http://www.quirksmode.org/js/events_order.html您可能需要重新考虑一些标记。 – whitehat101

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

这将帮助

来源

2013-10-07 09:11:23

孩子点击事件触发父鼠标悬停事件

回答

相关问题