如何防止內部html元素捕獲javascript事件？

Question

在我的電腦上，所描述的問題只發生在Chrome和Opera（而不是IE或Firefox）中。但我認爲這與javascript相關，而不是任何特定的瀏覽器。

這裏是小提琴：http://jsfiddle.net/JN37b/

HTML：

<ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
</ul> 

的javascript：

$('ul').mouseout(function() { 
    event.stopPropagation(); //this just for testing 
    alert('out'); 
}); 

和一些CSS ..

它看起來像這樣：

當你的鼠標（在Chrome或Opera）在紅色塊（這是<ul>），並在較小的藍色框（這是<li>）水平移動鼠標，則會出現警告框。這意味着鼠標事件事件是在<ul>元素上觸發的。

問：如何防止<li>從捕獲鼠標，使之透明此事件，讓鼠標移開事件只發生在鼠標完全離開<ul>區域？我試過event.stopPropagation();但它沒用，因爲它的工作方向相反。

Answer 1

通過使用MouseLeave事件，而不是

$('ul').mouseleave(function() { 
    alert('out'); 
}); 

FIDDLE