Question

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

SCRIPT

$(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;   
 }

Answer 1

你自己就在那里。由于mouseover和mouseout事件会出现气泡，因此事件处理程序正在观看的元素的子元素的mouseover和mouseout会触发多次。 jQuery提供了IE启发的mouseenter和mouseleave事件，它们只触发监视元素本身的鼠标事件，并且不会触发元素子元素上的事件。使用mouseover和mouseleave事件，您的代码将按预期工作。见updated fiddle。或者，使用jQuery hover语法，该语法在内部使用mouseenter和mouseleave事件，并以方便的语法包装。

Answer 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!"); 
    });
});

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

2 个答案: