1

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...

chopper
  • 6,649
  • 7
  • 36
  • 53
Patrick
  • 413
  • 6
  • 12
  • You can also use the shorthand notation "`$`" for "jQuery" to save yourself some typing `$('.hover_test').bind`... – Jack Feb 22 '13 at 08:18
  • I know, but i'm working with some other libraries, using "jQuery" instead of "$" is the safest way for me to code ;) – Patrick Feb 22 '13 at 08:33
  • You can wrap the jQuery code to `(function($){ ... })(jQuery)` which will guarantee that `$` is available and that it won't mess up the other libraries. – JJJ Feb 22 '13 at 08:36
  • Yes, i know that too, but some of my Scripts are used on multiple sites, and i share them with the community - using jQuery instead of $ is no problem for me and you know after the first second reading the script its an jQuery Function :-) – Patrick Feb 22 '13 at 08:43

2 Answers2

0

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

Hello
  • 2,247
  • 4
  • 23
  • 29
0

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.

MarcoK
  • 6,090
  • 2
  • 28
  • 40
  • The main reason why i need this function is to create a trigger zone in a big div too look from which side the mouse come from. Currently i'm using a event.offset method, but its a bit buggy, so i'm searching for a "better" way to get the events "mouse came from top","mouse came from left", ... – Patrick Feb 22 '13 at 08:36
  • I believe the limitation is even deeper, in the OS level. The browser receives the mouse position at certain intervals from the OS and triggers the events at those points. – JJJ Feb 22 '13 at 08:37
  • @Patrick If that's what you want, you might want to ask a different question since that has nothing to do with this one. – MarcoK Feb 22 '13 at 08:39
  • @Juhana You're right, I just checked the Chromium source and the mouse events are handled by the OS. Thanks! – MarcoK Feb 22 '13 at 08:39
  • @MarcoK, Yep, you're right, i'll open an extra Question for this. – Patrick Feb 22 '13 at 08:45