knockout.js 事件绑定(bind) - mouseover 和 mouseout 事件的意外行为

Question

我看到的问题是，当我执行以下操作时，鼠标悬停事件似乎没有冒泡:

<div data-bind='events: {mouseover: someFunc, mouseout: someOtherFunc}'>
    <div data-bind='text: someText'></div>
</div>

我看到的是当我最初悬停时， someFunc 函数会触发(我正在使用这些函数来应用一个类来获得悬停效果)。但是，当我的光标进入内部 div 时，我的 mouseout 函数会触发，即使 mouseover 事件应该从内部 div 冒泡到外部 div。

这个 fiddle 演示了这个问题:
http://jsfiddle.net/cSBcC/1/

在 fiddle 中，只需尝试将鼠标悬停在各种 li 上，当光标进入内部 div 时，“悬停”类被删除，即使我们仍然将鼠标悬停在 li 上。

有任何想法吗？

Answer 1

如果您正在引用 jQuery(您是)，那么您可以使用 mouseleave而不是 mouseout因为它会表现得像你期望的那样。
mouseout即使从外部元素移动到内部元素，也会触发事件。

这是您使用 mouseleave 的示例: http://jsfiddle.net/rniemeyer/KUNcf/

另一种选择是仅使用 CSS 并删除事件绑定(bind)，例如:http://jsfiddle.net/rniemeyer/KUNcf/2/

li.name:hover {
    background-color: yellow;        
}

​​​