knockout.js event binding - unexpected behavior with mouseover and mouseout events

Question

The issue I'm seeing is that mouse over events don't seem to bubble when I do something like:

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

What I'm seeing is when I initially hover, the someFunc function fires (i'm using these functions to apply a class to get a hover effect). However, when my cursor enters the inner div, my mouseout function fires, even though the mouseover event should bubble from the inner div to the outer div.

This fiddle demonstrates the issue: http://jsfiddle.net/cSBcC/1/

In the fiddle, just try mousing over the various li's and when the cursor gets into the inner div the "hover" class is removed, even though we are still mouseover on the li.

Any ideas?

Answer 1

If you are referencing jQuery (which you are), then you can use mouseleave instead of mouseout as it will behave like you are expecting.

mouseout events fire even when moving from an outer element to an inner element.

Here is your sample using mouseleave: http://jsfiddle.net/rniemeyer/KUNcf/

The other option is to just use CSS and remove the event binding like: http://jsfiddle.net/rniemeyer/KUNcf/2/

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

​