Question

I’m currently developing a plugin that uses the mousemove event on a child element when the parent element is ‘entered’

It works fine when there is one instance but what if the user has many instances?

The plugin is to be used on a div containing an image and there is a div inside that which follows the cursor.

So as you hover over the image the div follows the cursor..

I thought it might have been because the mousemove event was binded to too many elements so on ‘mouseleave’ i undbind mousemove but the problem still persists.

It seems fine in safari and chrome.

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

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

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

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

});

the setPosition() function just sets the position of the div on the cursor so its centered.

Its sluggish only when the plugin runs on multiple elements??

Please Help, Thanks.

Answer 1

You should handle the event on a containing element instead of attaching the event handler to each individual element.

For example:

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

This means you are creating 1 event handler on a common parent, instead of 1 event handler per element (google “jQuery event propagation” for more details). While this does complicate your setPosition() method a bit, it should improve performance, depending on how you implement it.