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

我有这个：

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

现在，当我把鼠标移到蓝色的块上，把它移到某个地方，一切都好了。但当我在蓝色块上移动鼠标，然后在红色块上移动鼠标时，也会触发mouseout事件。为什么会发生这种情况？我如何才能使mouseout事件仅在实际将鼠标移出块时发生？

使用，它“在鼠标或其他定点设备离开指定给元素及其所有子体的物理空间时被调度”：

使用，它“在鼠标或其他定点设备离开指定给元素及其所有子元素的物理空间时被调度”：

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

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