0

我目前正在开发一个插件，当父元素被“输入”时，它在子元素上使用 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 在光标上的位置，使其居中。

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

请帮忙，谢谢。

4

2 回答 2

0

如果您使用onto 绑定，那么您应该使用offto unbind 而不是unbind。那可能是你的问题。

于 2012-05-31T23:26:02.143 回答
0

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

例如：

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

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

于 2012-05-31T23:53:53.023 回答