Question

I have a setup where I have a grid of elements and when I rollover each element a popup appears like an advanced tooltip. I first check if the popup needs to follow the moused over elements mouse position, if so I use a mousemove event. I first stopObserving in case there was one set before, then I start observing. Do I really need to do this or is prototype smart enough to not to add duplicate events on the same element.

 show:function(param){
      if(this.isFollow){
        $(param.target).stopObserving('mousemove', this.onMouseMove);
        $(param.target).observe('mousemove', this.onMouseMove);
      }
},

//param.target is the element that is being rolled over. I pass this in to my show method to then find its x and y position.

 onMouseMove:function(event){
    var xPos = Event.pointerX(event);
    var yPos = Event.pointerY(event);
    _self._popup.setStyle({left: xPos + 10 + "px", top:yPos + 10 + "px"});
 }

Second question. When I move my mouse across the elements really fast my popup that is following the mouse sometimes lags and the mouse goes over the popup obstructing the mouseover event on the element below it.
I presume this is the nature of the mousemove as its not rendering fast enough. Should I be using setTimeout or something like that instead of mousemove, to prevent this lag.

Answer 1

1) No, Prototype won’t set the same event handler twice. It’ll only happen if you declare your handler function in-line (i.e. element.observe('click', function(){…})) since the handler will be sent a newly created function each time, and never the exact same instance of a function.
But in your case, where you’re referring to the onMouseMove function, Prototype will check whether that particular function is already registered for that particular event, on that particular element. And if it is, it won’t be registered again.

2) You can’t avoid the lag on fast mouse movements, no. The browser won’t send the mousemove events fast enough. You could use a timer, but I’d probably try registering a single mousemove handler for the parent element of all the grid-elements (or maybe even document itself), and use the X/Y coordinates to figure out which grid-element to show the tooltip for. Then you don’t have to bother with setting event handlers for each element. I.e. if the grid was a standard table, I’d listen for events on the <table> element itself, rather than on each and every <td>. Especially if you still want to implement a timer, I should think, it’d be easier to deal with everything in one place (otherwise, a timer might accidentally execute on some element you’ve already moused out of, and your tooltip will flicker back and forth or something. If you only want 1 tooltip at a time, it’s easier to manage it in 1 place.)