Question

在我的MVC应用程序中，我有一个带有以下DOM的视图：

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

这些“项目div”是通过视图内的foreach循环生成的。我的目标是在鼠标移动事件中显示另一个“div”，它将为用户提供一些选项（例如，分享，删除等等）。对于“选项div”，我没有特定的设计。但我的问题是，最好的目标是什么？我应该在foreach循环中创建“item div”旁边的“options div”，并在鼠标移动时设置css中的可见性吗？我试过了，这确实伤害了性能。

PS：我有大约2000个“项目div”。

谢谢！

Answer 1

您实际上不需要mousemove，而是mouseover和mouseout。

mousemove快速连续发射很多次，因为它会在每次鼠标移动时触发，即使鼠标停留在同一个元素上也是如此。因为听起来你只想设置显示或隐藏的内容取决于鼠标当前所在的元素，你可以使用鼠标悬停和鼠标移动来更有效地做 - 在鼠标悬停时显示相应的链接，并在mouseout上隐藏它们。 / p>

Answer 2

好吧，您可以在悬停时添加选项...（类似于需要选项的时候添加它）

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

嗯，这只是一个粗略的例子......

Answer 3

这是一个棘手的问题，所以我只能给你一些建议。当你有2000个DOM元素需要每个事件时，它更多地关于优化。

仅使用一个选项div并将其移至事件的适当位置。在DOM中，我会在您的项目集之前放置此选项div。
如果您尝试为2000个元素添加悬停事件，则会对性能产生巨大影响。这可能是你之前注意到的。
由于＃2考虑使用其他事件，例如点击（或右键单击），您可以将其附加到可充当委托的项目集的整体父级。在Google上查找“javascript事件委托”以查看示例。这是通过事件和巨大的DOM树来提高性能的常用方法。
如果绝对必须有悬停事件，提高效果的另一种方法是简单地分页您的项目

希望有所帮助

在jquery中使用mousemove（）的div的最佳方法是什么？

3 个答案: