MouseOver performance

Question

I am trying to build something like this in jQuery UI ( http://jqueryui.com/selectable/#default )

• Click on item 1 and then drag your mouse - you will see a [outline rectange] as visual cue for selected items.

while i was trying thsi in Google Closure . I created a container and items within container. soemthing very similar to what we have in demo here http://closure-library.googlecode.com/git/closure/goog/demos/container.html

I modified the demo add 4 lines of code

  goog.events.listen(goog.dom.getElement('tb4'),
        goog.events.EventType.MOUSEOVER,
        function(e) {
          logger.info('e.clientX :'+e.clientX +' - e.clientY :'+ e.clientY);
        });

which is hosted here (http://jsbin.com/ixEvocA/1/watch?output)

• Go to end in Scrolling Container section
• try mouse over vertically - this is very fast and event response is good
• horizontally -> stay in one item - this is very slow

what i am doing wrong ? or how can i make this faster. so that i have smooth [outline rectangle] as jquery ui have.

Answer 1

The mouseover event is not fired as you would expect. Instead it is just a "slightly complicated form" of mouseenter (see https://developer.mozilla.org/en-US/docs/Web/Reference/Events/mouseover).

If I understood well, what you wanted to do could be achieved by replacing the event, which you listen to, to mousemove.

Try

goog.events.listen(goog.dom.getElement('tb4'),
    goog.events.EventType.MOUSEMOVE,
    function(e) {
      logger.info('e.clientX :'+e.clientX +' - e.clientY :'+ e.clientY);
    }
);