mouseenter 事件与元素的绝对位置之间的冲突答案

【问题标题】：Conflict between mouseenter event and absolute position of the elementsmouseenter 事件与元素的绝对位置之间的冲突
【发布时间】：2012-09-06 10:34:08
【问题描述】：

我有一个包含多个具有绝对位置的 div 的 div，我想为父 div 处理鼠标输入事件，我使用这个小提琴： fiddle 它不能正常工作是他们处理这个问题的任何其他方式吗？

HTML 标记

<div id="content">
SYDNEY (Reuters) - An Australian man had his driving licence suspended for 10 months and was fined after he was
 <div class="abs"></div>
caught driving a scooter made of a motorised beer cooler capable of carrying several dozen drinks -- after knocking back a few.
</div>
<div id="output">   
</div>

脚本

$(function() {
var output = $("#output");
$("#content")
  .mouseenter(function(e){
    output.text("I'm in!");
}).mouseout(function(e) {
    output.text("I'm out!"); 
});
});


#content {
background-color:#cccc99;   
position:relative;     
}
.abs{
 position:absolute;
 top:0px;
 left:70px;
 background-color:red; 
 width:30px;
 height:30px;   
 }

【问题讨论】：

正常，哪里有问题？？
我已经编辑了小提琴
我认为在这种情况下应该关闭问题？ :-)

标签： css jquery mouseenter jquery-hover

【解决方案1】：

你自己已经成功了一半。因为mouseover 和mouseout 事件冒泡，它们将在您的事件处理程序正在监视的元素的子元素的mouseover 和mouseout 中多次触发。 jQuery 提供了受 IE 启发的 mouseenter 和 mouseleave 事件，它们仅在被监视元素本身上触发鼠标事件，而不会为元素子元素上的事件触发。使用mouseover 和mouseleave 事件，您的代码将按预期工作。请参阅此updated fiddle。或者，使用 jQuery hover 语法，它在内部使用 mouseenter 和 mouseleave 事件，并以方便的语法包装。

【讨论】：

它看起来像我期望的那样工作：-p 每个事件处理程序依次触发，根据鼠标进入或离开的最后一个观察元素吐出输出。因此，如果您将鼠标悬停在红色框上，然后离开顶部，则红色框的 mouseleave 将触发，然后其父容器的 mouseleave 将触发（鼠标事件按从内到外的顺序处理） .您需要它以不同的方式工作吗？
这可行，但前提是绝对 div 被添加为测试 div 的子级。例如，如果添加到文档的根目录，我们会得到一个 mouseleave 事件。
是的，事件通过 DOM 向上“冒泡”到父元素。大多数事件都以这种方式运行……例如，当您单击A 标记时，click 事件首先发生在A 标记上，然后是A 标记的父元素，然后事件在 DOM 上向上传播。只有当事件到达文档根目录时，浏览器才会导航到A 标记指定的新页面。实际上，您可以在A 标记上方的任何位置附加click 事件处理程序并查看事件（甚至阻止它进一步冒泡）。见jsfiddle.net/qhtEn

【解决方案2】：

据我了解 - 红色 div 有问题。这是正确的。使用jQuery hover 代替 mouseenter/mouseout

$(function() {
    var output = $("#output");
    $("#content")
      .hover(function(e){
        output.text("I'm in!");
    },function(e) {
        output.text("I'm out!"); 
    });
});

【讨论】：