鼠标事件从一个绝对定位的元素冒泡

Question

我有这样的：

<div id="parent"> 
    <div id="child"> 
     &nbsp; 
    </div> 
</div> 

$(document).ready(function() { 
    $('#parent').on('mouseout', function() { 
     alert('Mouse out!'); 
    }); 
}); 

http://jsfiddle.net/aYGBC/2/

现在，当我移动蓝色块上我的鼠标和地方将其移出一切都好。但是当我将鼠标移动到蓝色块上，然后移动到红色块上时，鼠标移出事件也会被触发。为什么会发生这种情况，我怎样才能让鼠标事件只在实际移动鼠标时才会发生？

Answer 1

使用mouseleave，其中“当鼠标或其他指针设备离开给予元素和所有及其后代的物理空间被分派”：

$(document).ready(function() { 
    $('#parent').on('mouseleave', function() { 
     alert('Mouse out!'); 
    }); 
});