低迷mousemove事件時綁定到多個元素

我目前正在開發使用鼠標移動事件的子元素上，當父元素是「進入」插件低迷mousemove事件時綁定到多個元素

它正常工作時，有一個實例，但如果用戶有很多實例會怎麼樣？

該插件將用於包含圖像的div，並且在光標後面有一個div。

所以，當你將鼠標懸停在DIV跟隨光標圖像..

我想這可能是因爲鼠標移動事件被綁定到太多的因素等「鼠標離開」我undbind鼠標移動，但問題仍然仍然存在。

它在safari和chrome中看起來很好。

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

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

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

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

});

setPosition（）函數只是設置光標上div的位置，使其居中。

只有當插件運行在多個元素上時它纔會緩慢？

請幫忙，謝謝。

來源

2012-05-31 James thompson

您應該在包含元素上處理事件，而不是將事件處理程序附加到每個單獨的元素。

例如：

$('#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-31 23:53:53

這是一個進步！它工作得更好，但我唯一的問題是現在所有的mousemove elems都跟着光標。我試過在使用$（'body'）的mouseleave回調函數中使用off（）。off（'mousemove'，elem）;並試圖$（this）而不是elem –

修正了它。它非常棒！非常感謝 –

如果您使用on進行綁定，則應使用off解除綁定，而不是使用unbind。這可能是你的問題。

來源

2012-05-31 23:26:02

謝謝，我注意到發佈後，但它仍然沒有幫助。 –

我注意到的一件事是，當div中有一個大的圖像時，它是最緩慢的。即使我沒有做任何事情。就像用CSS調整大小以適合300 x 200盒子的2mb壁紙。然而，添加很多很多的實例，它與小圖像的div它不是很糟糕，但你仍然可以注意到一個和許多之間的區別.. –

低迷mousemove事件時綁定到多個元素

回答

相關問題