jquery中的mousemove（）的div的最佳方法是什麼？

在我的MVC應用我有以下DOM視圖：jquery中的mousemove（）的div的最佳方法是什麼？

<div class="item"> 
Item Name 
</div>

這些「物品申報單」通過視圖裏面foreach循環產生。我的目標是在鼠標移動事件上顯示另一個「div」，它將爲用戶提供一些選項（如，共享，刪除等）。我沒有爲「選項div」設計特定的設計。但我的問題是最好的實現這個目標是什麼？我是否應該通過foreach循環在「item div」旁邊創建「選項div」，並在鼠標移動中設置css中的可見性？我試過了，它確實傷害了演出。 PS：我有2000年左右的「物品區分」。

謝謝！

來源

2010-07-12 OneDeveloper

你可能實際上並不想要mousemove，而是mouseover和mouseout。

mousemove大火快速連續很多很多次，因爲每次鼠標移動即使是很小的量，同時在元件觸發- 即使鼠標停留在相同的元素。因爲聽起來你只是想設置顯示或隱藏的東西取決於鼠標當前在哪個元素上，所以可以使用mouseover和mouseout來更有效地實現 - 在鼠標懸停上顯示相應的鏈接，並在mouseout上隱藏它們。

來源

2010-07-12 03:37:40 Amber

謝謝，琥珀！不會.toggle（）在鼠標懸停就夠了？ – OneDeveloper 2010-07-12 03:42:00

評論得太快 - 不，它不夠！再次感謝：） – OneDeveloper 2010-07-12 03:43:25

好了，你可以添加選項時，懸停......（什麼需要選擇的時候喜歡將其添加）

$('.item').hover(function(){ 
    var options = $(this).find('.options'); 
    if (options.length) { // check if option div is found 
     options.show(); // show the option found 
    } else { // if no option div found, create one then show it... 
     options = $('<div class="options"></div>').appendTo($(this)); 
    } 
}, function(){ 
    $(this).find('.options').hide(); // on mouseout, hide option div... 
});

很好，這只是一個粗略的例子....

來源

2010-07-12 03:41:37 Reigel

這是一個棘手的問題，所以我只能給你建議。當你有2000個DOM元素需要每個事件時，它更多地關於優化。

只使用一個選項div並將其移動到事件的相應位置。在DOM中，我會在您的項目設置之前放置此選項div。
如果您嘗試給2000個元素懸停事件，您將會產生巨大的性能影響。這可能是你之前注意到的。
由於＃2考慮使用不同的事件，如單擊（或右鍵單擊），您可以將其附加到可充當代理的項目集的整體父項。在Google上查找「javascript事件代理」以查看示例。這是通過事件和巨大的DOM樹提高性能的常用方法。
的另一種方法來提高性能，如果你絕對必須有一個懸停事件是簡單頁面的項目

希望幫助

來源

2010-07-12 03:45:17

jquery中的mousemove（）的div的最佳方法是什麼？

回答

相關問題