Javascript mouse event not captured properly when mouse moved very fast

Question

I am using JavaScript mouseover and mouseout events when I move my mouse very quickly the events are not triggered. Can you tell me what the problem is?

Please let me know how to solve this. Also let me know if anything else is needed.

Here is the code

HTML

4 => qq[
    <ul id="primary">
        <li id="firstTab" onmouseover="changeSecondaryMenu('index','explore');" onmouseout="changeSecondaryMenu('explore');"><a></a></li>
        <li id="secondTab" onmouseover="changeSecondaryMenu('home','explore');" onmouseout="changeSecondaryMenu('explore');"><a></a></li>
        <li id="thirdTab" onmouseover="changeSecondaryMenu('requests','explore');" onmouseout="changeSecondaryMenu('explore');"><a></a></li>
        <li onmouseover="changeSecondaryMenu('explore','explore');"><a class="current" href="contact.pl">About Site</a></li>
    </ul>
],
);

my $primary_menu = $primary_menu{$primary_index};

my %secondary_menu = (
    1 => qq[
        <ul id="secondary" onmouseover="cancelTimeOut();" onmouseout="resetTab(event);">
            <li> <a>Summary</a> </li>
            <li> <a>Updates</a>  </li>
            <li> <a>History</a> </li>
            <li> <a>News/Stats</a> </li>
            <li> <a>Gratitude & Good Life</a> </li>
        </ul>
    ],

JavaScript

function cancelTimeOut(){
    clearTimeout(timer);
}

function resetTab(evt){
    var evt = evt || window.event; // event object
    var target = evt.target || window.event.srcElement; // event target
    var targetID = target.getAttribute("id");
    if (targetID == "secondary") {
        clearTimeout(timer);
        if(currentTab !=null){
            document.getElementById("secondary").innerHTML = tabs[currentTab];
            Rounded("ul#secondary","tr","#FFFFFF","transparent","smooth");
        }
    }
}

function changeSecondaryMenu(tab,selectedTab) {
    currentTab = selectedTab;
    clearTimeout(timer);
    document.getElementById("secondary").innerHTML = tabs[tab];
    Rounded("ul#secondary","tr","#FFFFFF","transparent","smooth");
}

Answer 1

It depends. Javascript won't try to interpolate between "frames." Meaning, yes, if you move your mouse fast enough, one mousemove event will fire on one side of your object, and the next mousemove will fire on the other side, so mouseover and out never get fired and you're none the wiser.

If it is absolutely critical that you capture these events, you're going to have to do a little bit of work yourself. You can hook into mousemove yourself, and for each event fire, compare the position of the mouse during the last fire, and the current fire. You'll need to do a little geometry here, but if the line created by the two points hits the bounding box of the object in question (either 4 compares based on each of the sides, or 2 compares based on an X through the box), then manually fire mouseover. And then mouseout.