Dojo connect mouseover and mouseout
When you set up a dojo to connect to onmouseover
and onmouseout
and then add content on hover, the dojo fires the event onmouseout
immediately as 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]);
});
parent()
- this <td>
, and .star
- this is span. I want to add a hover image when the user hovers over a table cell. It works until the cursor hovers over the image, because it will cause severe blinking. Is this intentional? And is there a way to get around this?
Edit: Just tried something like this 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 on hover and only delete when you move the cursor outside of the table cell.
a source to share
The reason it works with jQuery in your example is because .hover uses the normalized onmouseenter / onmouseleave events. If you want to connect to them, it will work in Dojo as expected. Also, simulating the .hover for Dojo will:
dojo.NodeList.prototype.hover = function(over, out){
return this.onmouseenter(over).onmouseleave(out || over);
}
Then you simply:
dojo.query("...").hover(function(e){ .. }, function(e){ .. });
The differences between mouseeneter and mouseover is why you see the onmouseout immediate firing behavior.
a source to share