下拉菜单-在父节点中设置时，onmouseout在子节点上被调用 [英] Drop Down menu -- onmouseout getting invoked on the child node when set in the parent node
问题描述
在以下链接中尝试模仿browse catagories https://dev.twitter.com/discussions
Trying to mimic the browse catagories in the following link https://dev.twitter.com/discussions
onmouseover-容器将扩展以适合其内部的新项目-但是，将鼠标移到容器内(扩展的容器)将导致调用onmouseout －即使鼠标位于容器中容器本身-愚蠢的错误或不努力找出我可能在哪里以及如何出错
onmouseover -- the container expands to fit the new items within itself -- but,moving the mouse within the container(expanded conainer) will result in the onmouseout getting invoked -- even when the mouse is within the container itself -- silly mistake or not trying hard to find out where and how i might be going wrong
代码-
<html>
<style type="text/css">
#container{
overflow: hidden;
height: auto;
width: 350px;
background-color: rgba(0,0,0,0.65);
}
.contents{
height: 30px;
width: 350px;
background-color: yellow;
float: left;
}
</style>
<script type="text/javascript" >
var foo = new Array("bar","santa","claus")
function fire(){
var contents = document.getElementById("contents")
if(contents.hasChildNodes())
return
for(i = 0 ; i < foo.length ; i++){
var tem=document.createElement("div");
tem.setAttribute("id",'cont'+i);
tem.setAttribute("class","contents");
tem.appendChild(document.createTextNode(foo[i]))
contents.appendChild(tem)
}
}
function unfire(evt){
if ((evt.target || evt.srcElement).id != "container")
return;
var contents = document.getElementById("contents");
while(contents.hasChildNodes())
contents.removeChild(contents.firstChild)
}
</script>
<div id="container" onmouseover="fire(event)" onmouseout="unfire(event)">
Move your mouse here
<div id="contents" ></div>
</div>
</html>
推荐答案
对不起，我的原始答案完全错误，我不确定自己在想什么.当然，当鼠标移动到孩子时，mouseout会在父对象上触发.在这种情况下，您需要检查event对象的relatedTarget或toElement属性，并检查该元素是否是容器的后代.
Sorry, I got my original answer completely wrong, I'm not sure what I was thinking. Of course, mouseout fires on a parent when the mouse moves to a child. In this case, you need to check the relatedTarget or toElement properties of the event object and check to see if that element is a descendant of the container.
您可以使用Internet Explorer中的contains()和其他浏览器中的compareDocumentPosition()来检查血统.例如，将onmouseout="unfire(event)"更改为onmouseout="unfire.call(this, event)"并将以下代码添加到unfire函数中:
You can check ancestry using contains() in Internet Explorer and compareDocumentPosition() in other browsers. For example, change onmouseout="unfire(event)" to onmouseout="unfire.call(this, event)" and add the following code to the unfire function:
var to = evt.relatedTarget || evt.toElement;
if((this.contains && this.contains(to)) || this.compareDocumentPosition(to) & 16)
return;
这篇关于下拉菜单-在父节点中设置时，onmouseout在子节点上被调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
