Question

当设置与onmouseover和onmouseout的dojo连接，然后在鼠标悬停时添加内容时，dojo会立即触发onmouseout事件，因为有新内容。例如：

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()是<td>，.star是一个范围。我想在用户悬停表格单元格时添加悬停图像。只要光标没有悬停在图像上，它就会起作用，因为这会导致一些严重的闪烁。这是故意的吗？它有办法吗？

编辑刚尝试了与jQuery类似的东西，它按预期工作（至少我预期它会起作用。）

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

这将在悬停时显示图像，并仅在将光标移动到表格单元格外时删除。

Answer 1

在你的例子中它与jQuery一起使用的原因是因为.hover使用规范化的onmouseenter / onmouseleave事件。如果你要连接到那些，它将按预期在Dojo中工作。此外，Dojo的.hover模拟将是：

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

然后你就是：

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

mouseeneter和mouseover之间的区别是你看到立即onmouseout射击的行为的原因。

dojo连接mouseover和mouseout

1 个答案: