鼠標事件從一個絕對定位的元素冒泡

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