如何防止内部html元素捕获javascript事件？

在我的电脑上，所描述的问题只发生在Chrome和Opera中（而不是IE或Firefox）。但我认为它与javascript相关，而不是与任何特定的浏览器相关

这是小提琴：

html:

还有一些css

看起来是这样的：

当您将鼠标（在Chrome或Opera中）悬停在红色块（即

）上，并将鼠标水平移动到较小的蓝色框（即
）上时，会出现警告框。这意味着mouseout事件是在
元素上触发的

问题：如何防止
捕获鼠标，使其对此事件透明，以便只有当鼠标完全离开
区域时才会发生鼠标出事件

我尝试了
event.stopPropagation（）但它是无用的，因为它的工作方向相反。
使用mouseleave事件代替

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

查看以了解
mouseout
和
mouseleave
事件之间的区别
$('ul').mouseout(function() {
    event.stopPropagation(); //this just for testing
    alert('out');
});

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