Каков наилучший способ для div на mousemove () в jquery?

Question

В моем приложении MVC у меня есть представление со следующим DOM:

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

Эти «элементы div» генерируются через цикл foreach внутри представления. Моя цель - показать еще одно "div" на событие перемещения мыши, которое предложит пользователю некоторые параметры (например, поделиться, удалить .. и т. Д.) Я не имею в виду конкретный дизайн для «опции div». Но мой вопрос в том, что лучше всего достичь этого? Должен ли я создавать «параметры div» рядом с «элементом div» в цикле foreach и устанавливать видимость в css при перемещении мыши? Я попробовал это, и это действительно повредило представление.

PS: у меня есть около 2000 «предметов».

Спасибо!

Answer 1

Скорее всего, вы на самом деле не хотите mousemove, но вместо этого mouseover и mouseout.

mousemove срабатывает много раз в быстрой последовательности, потому что каждый раз запускается при перемещении мыши над элементом даже небольшое движение - даже если мышь оставалась над тем же элементом.Поскольку звучит так, будто вы просто хотите установить отображение или скрытие объектов в зависимости от того, над каким элементом мыши находится курсор в данный момент, вы можете использовать mouseover и mouseout, чтобы сделать это намного эффективнее - показывать соответствующие ссылки при наведении курсора и скрывать их при наведении мышью.

Answer 2

Это сложный вопрос, поэтому я могу только дать вам предложения.Это больше об оптимизации, чем о чем-либо еще, когда у вас есть 2000 элементов DOM, каждый из которых нуждается в событии.

1. Используйте только один параметр div и переместите его в соответствующее место на вашем событии.В DOM я поместил бы этот параметр div перед вашим набором элементов.
2. Вы окажете огромное влияние на производительность, если попытаетесь дать 2000 элементам всплывающее событие.Это может быть тем, что вы заметили ранее.
3. Из-за # 2 рассмотрите возможность использования другого события, такого как щелчок (или щелчок правой кнопкой мыши), который вы можете прикрепить к общему родителю набора элементов, который может выступать в качестве делегата.Ищите «делегирование событий javascript» в Google, чтобы увидеть примеры.Это распространенный способ повышения производительности с помощью событий и огромных DOM-деревьев.
4. Альтернативный способ повышения производительности, если вам абсолютно необходимо событие при наведении курсора, - это просто просмотр ваших элементов

Надеюсь, что это поможет

Answer 3

ну, вы можете добавить опции при наведении курсора ... (что-то вроде того, когда нужны опции, добавьте их)

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

ну, это просто грубый пример ....