dojo connect mouseover and mouseout

Question

When setting up dojo connections to onmouseover and onmouseout, and then adding content on mouseover, dojo fires the onmouseout event at once, since there is new content. Example:

dojo.query(".star").parent().connect("onmouseover", function() {
    dojo.query("span", this).addContent("<img src='star-hover.jpg'>");
}).connect("onmouseout", function() {
    dojo.destroy(dojo.query("img", this)[0]);
});

The parent() is a <td>, and the .star is a span. I want to add the hover image whenever the user hovers the table cell. It works as long as the cursor doesn't hover the image, because that will result in some serious blinking. Is this deliberate? And is there a way around it?

Edit: Just tried out something similar with jQuery, and it works as expected (at least as I expected it to work.)

$(".star").parent().hover(function() {
    $("span", this).append("<img src='star-hover.jpg'>");
}, function() {
    $("img", this).remove();
});

This will show the image when hovering, and remove only when moving the cursor outside the table cell.

I'd rather have the image inside all span.star nodes from start, then add a kind of '.hovered' class to <td> nodes when mouse is over, and add a css rule to display images inside span.star only under 'td.hovered'. — Kniganapolke
Sure, but there would be occasions where one would like to append elements on hover state. And surely this can't be the correct behaviour? — peirix

dante dante · Accepted Answer · 2010-04-16T13:12:21

The reason it works with jQuery in your example is because .hover uses the normalized onmouseenter/onmouseleave events. If you were to connect to those, it would work in Dojo as expected. Also, a simulation of .hover for Dojo would be:

dojo.NodeList.prototype.hover = function(over, out){
    return this.onmouseenter(over).onmouseleave(out || over);
}

Then you'd just:

dojo.query("...").hover(function(e){ .. }, function(e){ .. });

The differences between mouseeneter and mouseover are why you are seeing the behavior of an immediate onmouseout firing.

dojo connect mouseover and mouseout

1 Answers