Question

从http://www.webdeveloper.com/forum/archive/index.php/t-65078.html改编的文字和示例代码可能无法反映实际问题：

我有一个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>

每当我在div中移动鼠标时，它都会正确调用move函数，但onmouseout属性不能像我想的那样工作。我认为只有当你将鼠标移离div时才会调用out()函数，但每当我离开其中一个表行时都会调用out()。所以，如果我的鼠标在一行上，我移动到下一行，它会调用out()。我希望只有当用户离开整个div时才会调用out()。任何想法？

我正在尝试的功能是我隐藏另一个div。

Answer 1

onmouseleave对我有用。

Answer 2

听起来你遇到了事件冒泡的问题。

当您悬停tr时，您的鼠标不再位于div中 - 因此，当您在它们之间移动时，您需要tr (out) - ＆gt; div (in) - ＆gt; div (out) - ＆gt; tr (in)。这就是为什么你在out()之间调用tr函数的原因。

有用的阅读：

Answer 3

我建议你阅读这篇关于javascript事件的3个阶段的文章 http://www.quirksmode.org/js/events_order.html

在函数move或out中，你可以检查srcElement（IE）或target（W3C）是否有一个名为dvRep的id ..

看起来应该是这样的：

function out(event)
{
   event.stopPropagation(); //cancel bubbling

   ele = event.target || event.srcElement
   if (ele.id === "dvRep"){  
      //your code
   }
}

div onmouseout无法按预期工作

3 个答案: