很难解释，一个奇怪的javascript鼠标悬停问题

Question

我有一个盒子（黑色边框）。我有一个处理程序来恍惚这个盒子的mouseout事件。问题是当鼠标悬停在一个项目上时，让我们说这个框内的div（红色边框和蓝色边框）。

我谷歌搜索了三天，但没有找到任何解决方案。当鼠标在其边界内时，为什么在盒子内触发mouseleave / out事件。 div的位置是“绝对的”。我尝试使用核心JavaScript和JQuery。

Answer 1

jQuery的.live已被弃用，请使用.on

此外，使用mouseout表示当鼠标离开所选元素 OR 任何元素子元素时，将触发该事件。 mouseleave仅适用于所选元素。

  $('.nocMenuContainer').on('mouseleave',function(){     
       alert('bye');
  });

Answer 2

确保按钮顶部没有其他选择器。例如，如果你有一个带填充和内部标记的div，当你的鼠标从div移动到标签时，即使你在里面，mouseleave事件也会激活。解决方案？将border，mouseout和padding直接添加到标记。

Answer 3

http://www.quirksmode.org/js/events_mouse.html#mouseover有一份很好的文档。它可以帮助您理解为什么在将鼠标移动到您的框内时会触发事件;它提出了区分外部和内部动作的解决方案。

Answer 4

我遇到了类似的问题，但浏览器表现得很正常。 mouseenter和mouseleave事件不会像您期望的那样在所有重叠的dom元素上传播。
对于需要它的情况，我开发了一个小jQuery library called superBind 正如您在示例中看到的，唯一的区别是您通过方法superBind而不是通常的方法（bind，live，on绑定事件。等等。） 希望这有帮助！