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

问题描述

当我快速移动鼠标时，我正在使用 JavaScript mouseover 和 mouseout 事件，这些事件不会被触发.你能告诉我问题是什么吗?

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

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 事件将在另一侧触发，因此 mouseover 和 out 永远不会被触发，您也不会更聪明.

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 个比较，或者基于通过框的 X 进行 2 个比较)，然后手动触发鼠标悬停.然后鼠标移出.

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屋！