如何防止内部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>元素上触发了 mouseout 事件。

问题：如何阻止<li>捕获鼠标，使其对此事件透明，以便只有当鼠标完全离开{{1}时才会发生 mouseout 事件区域？

我尝试了<ul>，但它没用，因为它的工作方向相反。

Answer 1

改为使用mouseleave事件

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

FIDDLE