javascript div onmouseout 无法按预期工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9094071/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
div onmouseout does not work as expected
提问by ankur
Text and sample code adapted from http://www.webdeveloper.com/forum/archive/index.php/t-65078.html, may not reflect actual question:
改编自http://www.webdeveloper.com/forum/archive/index.php/t-65078.html 的文本和示例代码，可能无法反映实际问题：
I have a div and then a div with a nested table inside it: also there is some div outside the parent div.
我有一个 div，然后有一个 div，里面有一个嵌套表：在父 div 之外还有一些 div。
<div onmousemove="move()" onmouseout="out()">
<div id="dvRep"> </div>
<table>
<tr><td>ITEM 1</td></tr>
<tr><td>ITEM 2</td></tr>
<tr><td>ITEM 3</td></tr>
<tr><td>ITEM 4</td></tr>
<tr><td>ITEM 5</td></tr>
</table>
</div>
<div id="divChartPopupMenu">
Hide me.
</div>
Whenever i move my mouse within the div it correctly calls the move function, but the onmouseoutattribute doesn't work like i thought. i thought that the out()function would only be called if you moved your mouse off the div, but out()is called whenever i move off one of the table rows. so if my mouse is on a row and i move to the next row it calls out(). i want out()to be called only when the user moves off the entire div. any ideas?
每当我在 div 内移动鼠标时，它都会正确调用移动函数，但该onmouseout属性并不像我想象的那样工作。我认为out()只有当您将鼠标移出 div 时才会调用该函数，但是out()每当我移开表格行之一时都会调用该函数。所以如果我的鼠标在一行上并且我移动到下一行，它会调用out(). 我只想out()在用户离开整个 div 时被调用。有任何想法吗？
What i am trying is on out function i am hiding another div.
我正在尝试的功能是我隐藏了另一个 div。
回答by Ellen
onmouseleaveis the thing that worked for me.
onmouseleave是对我有用的东西。
回答by Sam
It sounds like you're having issue with event bubbling.
听起来您遇到了事件冒泡的问题。
When you hover a tryou're mouse is no longer 'in' the div- therefore when you move between them you're going tr (out)-> div (in)-> div (out)-> tr (in). That's why you're out()function is being called between tr's.
当您将鼠标悬停在 a 时，tr您的鼠标不再“在” div- 因此，当您在它们之间移动时，您将tr (out)-> div (in)-> div (out)-> tr (in)。这就是为什么out()在tr's之间调用函数的原因。
Useful reading:
有用的阅读：
回答by vireshas
i suggest you to read this article on 3 phases of javascript events.
http://www.quirksmode.org/js/events_order.html
我建议你阅读这篇关于 javascript 事件的 3 个阶段的文章。
http://www.quirksmode.org/js/events_order.html
in the function move or out, you can check if the srcElement(IE) or target(W3C) has an id called dvRep..
在函数 move 或 out 中，您可以检查 srcElement(IE) 或 target(W3C) 是否有一个名为 dvRep..
it should look something like this:
它应该是这样的：
function out(event)
{
event.stopPropagation(); //cancel bubbling
ele = event.target || event.srcElement
if (ele.id === "dvRep"){
//your code
}
}
