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

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