2010-04-13 104 views
2

當設置dojo連接到onmouseoveronmouseout,然後在mouseover上添加內容時,dojo會立即觸發onmouseout事件,因爲有新內容。例如:dojo連接鼠標懸停和鼠標移動

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(); 
}); 

徘徊時,這將顯示圖像,並且只刪除在表格單元格外移動光標時。

+0

我寧願將圖像放在所有span.star節點內,然後在鼠標結束時向​​節點添加一種「.hovered」類,並添加css規則以僅在span.star內顯示圖像'td.hovered'下。 – Kniganapolke 2010-04-14 11:08:47

+0

當然,但有些情況下人們希望在懸停狀態下追加元素。當然,這不可能是正確的行爲? – peirix 2010-04-14 14:07:34

回答

5

它在你的例子中使用jQuery的原因是因爲.hover使用規範化的onmouseenter/onmouseleave事件。如果你想連接到這些,那麼它將按照預期在Dojo中工作。此外,.hover對Dojo的模擬將是:

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

,那麼你會只是:

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

mouseeneter和鼠標懸停之間的差異爲什麼你看到一個立即的onmouseout射擊的行爲。