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

Question

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

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

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

这个小提琴演示了这个问题:http: //jsfiddle.net/cSBcC/1/

在小提琴中,只需尝试鼠标悬停在各种li上,当光标进入内部div时,"hover"类被删除,即使我们仍然在鼠标悬停在li上.

有任何想法吗？

Answer 1

如果你正在引用jQuery(你是),那么你可以使用mouseleave而不是mouseout像你期望的那样行事.

mouseout 即使从外部元素移动到内部元素,事件也会触发.

以下是您的示例mouseleave:http://jsfiddle.net/rniemeyer/KUNcf/

另一种选择是使用CSS并删除事件绑定,如:http://jsfiddle.net/rniemeyer/KUNcf/2/

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

​