当鼠标移动非常快时，Javascript鼠标事件未正确捕获 [英] Javascript mouse event not captured properly when mouse moved very fast

问题描述

当我非常快速地移动鼠标时，我使用JavaScript鼠标悬停和鼠标悬停事件，事件不被触发。你能告诉我问题是什么吗？

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.

这里是代码

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

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");
}

推荐答案

Javascript不会尝试在框架之间插值。意思是说，如果你足够快地移动你的鼠标，一个mousemove事件将在对象的一边发射，而另一个mousemove将在另一边发射，所以鼠标悬停和从未被触发，你没有更聪明。

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.

如果您捕获这些事件绝对至关重要，那么您将不得不自己做一些工作。你可以钩住自己的mousemove，并且对于每个事件的火灾，比较在最后一次火灾期间鼠标的位置和当前的火。你需要在这里做一个小几何，但是如果由两点创建的线匹配所讨论的对象的边界框（或者根据每一边进行4个比较），或者2根据X通过框进行比较），然后手动触发鼠标悬停。然后mouseout。

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.

这篇关于当鼠标移动非常快时，Javascript鼠标事件未正确捕获的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！