Javascript 绑定到多个元素时firefox中的缓慢Mousemove事件

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

当有一个实例时，它可以正常工作，但是如果用户有多个实例呢

该插件将用于包含图像的div，并且在光标后面的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在光标上的位置，使其居中

只有当插件在多个元素上运行时，它才会变慢

---

请帮助，谢谢。

如果您使用on来绑定，那么您应该使用off来解除绑定，而不是解除绑定。这可能是您的问题。

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

例如：

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

---

这意味着您要在一个公共父级上创建一个事件处理程序，而不是每个元素创建一个事件处理程序。虽然这会使设置位置方法有点复杂，但它应该会提高性能，具体取决于您如何实现它。

谢谢，我在发布后就注意到了这一点，但仍然没有帮助。我注意到的一件事是，当div中有一个大图像时，它会非常滞后。即使我没有对它做任何处理。就像一张2mb的壁纸，用CSS调整大小，以适合一个300 x 200的盒子。然而，在一个带有小图像的div中添加大量的实例并没有那么糟糕，但是你仍然可以注意到一个和多个实例之间的区别。这是向前迈出的一步！！它工作得更好，但是我唯一的问题是现在所有的mousemove元素都跟随光标。我试过在mouseleve回调中使用off，使用$body.off'mousemove'，elem；还尝试了$this而不是elem