jQuery: mouseenter/mousemove/mouseover not recognized with small div and fast mouse movement

问题

I have a div with width:5px and height:400px (for example). If i want to fire a function when this div is hovered, the Event is not recognized when i move my mouse too fast over it (It doesnt matter if i use mouseover/mouseenter/mousemove).

You can see a working example here: http://jsfiddle.net/2YZvk/

This is my Function:

jQuery(document).ready(function(){
    jQuery('.hover_test').bind('mouseenter',function(){
        jQuery(this).css('background-color','#30a900');
    });
});

Is it possible to fire this event somehow, even if i move my mouse too fast? Making the div wider is not an option...

回答1:

It's just "how the browser works"; it simply doesn't fire en event for every pixel you touch, but for every x-amount of milliseconds. It checks if the position of the previous position of your pointer is different, and will fire the event afterwards. This is handled through the OS.

Move your mouse fast over this changed version of your JSFiddle. Not all bars will be colored directly: only after the x-amount of milliseconds as defined inside your browser.

回答2:

When you move your mouse to fast, the speed is(for example) 5, and 5 + 5 + 5 + 5 = 20, so the steps you can touch are 5, 10, 15, 20, but if the div is at 7, 14, 18 it will not happen, its just the way it works

来源：https://stackoverflow.com/questions/15019523/jquery-mouseenter-mousemove-mouseover-not-recognized-with-small-div-and-fast-mo