下拉菜单——在父节点中设置时，onmouseout 在子节点上被调用
尝试模仿以下链接中的浏览类别https://dev.twitter.com/讨论
onmouseover - 容器扩展以适应自身内的新项目 - 但是，在容器内移动鼠标（扩展容器）将导致 onmouseout 被调用- 即使鼠标位于容器本身内 - 愚蠢的错误或没有努力找出我可能出错的位置和方式
代码 -
<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>
Trying to mimic the browse catagories in the following link https://dev.twitter.com/discussions
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
Code --
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
抱歉，我原来的答案完全错误，我不确定我在想什么。当然，当鼠标移动到子级时，
mouseout会在父级上触发。在这种情况下，您需要检查event对象的latedTarget或toElement属性，并检查该元素是否是容器。您可以在 Internet Explorer 中使用
contains()检查祖先，在其他浏览器中使用compareDocumentPosition()。例如，将onmouseout="unfire(event)"更改为onmouseout="unfire.call(this, event)"并将以下代码添加到unfire功能：Sorry, I got my original answer completely wrong, I'm not sure what I was thinking. Of course,
mouseoutfires on a parent when the mouse moves to a child. In this case, you need to check therelatedTargetortoElementproperties of theeventobject and check to see if that element is a descendant of the container.You can check ancestry using
contains()in Internet Explorer andcompareDocumentPosition()in other browsers. For example, changeonmouseout="unfire(event)"toonmouseout="unfire.call(this, event)"and add the following code to theunfirefunction: