当绑定到多个元素时，Firefox 中的缓慢鼠标移动事件

Sluggish Mousemove event in firefox when bound to multiple elements

本文关键字：缓慢 鼠标 事件 移动 Firefox 绑定 元素      更新时间：2023-09-26

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

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

该插件将用于包含图像

的div，并且光标后面有一个div。

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

我认为这可能是因为鼠标移动事件绑定到太多元素，所以在"mouseleave"上我取消绑定了鼠标移动，但问题仍然存在。

在野生动物园和铬中似乎很好。

elem
.on('mouseenter', function(){
  $(this).on('mousemove', function(e){
     setPosition();
  });
})
.on('mouseleave', function(){
  $(this).unbind('mousemove');
});

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

只有当插件在多个元素上运行时它才会迟钝？？

请帮忙，谢谢。

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

例如：

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

这意味着您将在公共父级上创建 1 个事件处理程序，而不是每个元素创建 1 个事件处理程序（谷歌"jQuery 事件传播"以获取更多详细信息）。虽然这确实使 setPosition（） 方法有点复杂，但它应该会提高性能，具体取决于您如何实现它。

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

相关文章：