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

Question

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

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;   
 }?

Answer 1

你自己就到了一半.因为mouseover和mouseout事件会冒泡,所以它们会触发多次您mouseover和mouseout事件处理程序正在观看的元素的子元素.jQuery提供了IE启发mouseenter和mouseleave事件,它们只触发监视元素本身的鼠标事件,并且不会触发元素子元素上的事件.使用mouseover和mouseleave事件,您的代码将按预期工作.看到这个更新的小提琴.或者,使用jQuery hover语法,它在内部使用mouseenter和mouseleave事件,以方便的语法包装.