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

Question

The problem I see is that the mouse over events does not seem to bubble up when I do something like:

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

What I see is, when I initially aimed at the place, the someFunc function is triggered (I use these functions to apply the class to get the hang effect). However, when my cursor enters the inner div, my mouseout function fires even if the mouseover event should bubble from the inner div to the outer div.

This script demonstrates the problem: http://jsfiddle.net/cSBcC/1/

In the fiddle, just try mousing over different li, and when the cursor enters the inner div, the hover class will be deleted, although we are still hovering over li.

Any ideas?

Answer 1

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

mouseout events fire even when moving from an external element to an internal element.

Here is an example using mouseleave : http://jsfiddle.net/rniemeyer/KUNcf/

Another option is to simply use CSS and remove the event binding, for example: http://jsfiddle.net/rniemeyer/KUNcf/2/

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