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

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/

现在，当我将鼠标移动到蓝色块上并将其移出某处时，一切正常。但是当我将鼠标移动到蓝色块上然后再移动到红色块上时，也会触发mouseout事件。为什么会发生这种情况？如何在实际将鼠标移出块时才能发生mouseout事件？

Answer 1

使用mouseleave，“当鼠标或其他指针设备离开给予该元素及其所有后代的物理空间时，将调度该数据”：

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