does a click also trigger a mouseout in chrome

Question

I'm testing a ratings module I'm working on, had an idea for a fairly simple construction that'd allow for smooth ajax based voting, but found something odd..

The contruction is two divs, one nested in the other to show the stars, mousing over sets the width, which would be translated into a percent as a vote later on.

In testing this, I found that everything worked, but when I clicked, it sometimes made the width of the inner DIV reset, which is what it would do if I moused out, I'm not sure I understand why just yet. I'm including a working example of this.

http://www.nogumallowed.com/test.php

Answer 1

Here is the fixed code:

$(".ratingsBlock").mousemove(function(e){
    $(".ratingsScale").width(e.offsetX);
});

$(".ratingsBlock").click(function(e){
    $(this).attr("score",e.offsetX);

});

$(".ratingsBlock").mouseleave(function(e){
    $(".ratingsScale").width($(this).attr('score'));
    //$(".ratingsScale").animate({width:$(this).attr('score')+'px'}, 500);
});

I changed the mouseOut function to mouseLeave, and made the rating's score update when .ratingsBlock is clicked.

mouseOut is weird sometimes...