Question

我正在开发一个插件，当父元素被“输入”时，它会在子元素上使用mousemove事件

当有一个实例时，它可以正常工作，但如果用户有很多实例，该怎么办？

该插件将用于包含图像的div，并且在光标后面有一个div。

因此，当您将鼠标悬停在图像上时，div会跟随光标..

我认为可能是因为mousemove事件被绑定到太多元素所以在'mouseleave'上我取消绑定mousemove但问题仍然存在。

在safari和chrome中似乎很好。

elem
.on('mouseenter', function(){

  $(this).on('mousemove', function(e){
     setPosition();
  });

})
.on('mouseleave', function(){

  $(this).unbind('mousemove');

});

setPosition（）函数只是设置光标上div的位置，使其居中。

只有当插件在多个元素上运行时才会缓慢？

请帮助，谢谢。

Answer 1

如果您使用on进行绑定，则应使用off取消绑定，而不是unbind。那可能是你的问题。

Answer 2

您应该在包含元素上处理事件，而不是将事件处理程序附加到每个单独的元素。

例如：

$('#parentDiv').on('mousemove', '#someDiv1, #someDiv2', function(event)
{
  // event.target is the div that triggered the mousemove event
  setPosition(event.target);
});

这意味着您要在公共父级上创建1个事件处理程序，而不是每个元素使用1个事件处理程序（有关详细信息，请参阅google“jQuery event propagation”）。虽然这会使您的setPosition（）方法稍微复杂化，但它应该会提高性能，具体取决于您实现它的方式。

当绑定到多个元素时，Firefox中的Mouseluove事件很慢

2 个答案: