Question

我有一些包含一些列的表。在每张图片中我都有一个onmouseover / onmouseout事件，它在div中显示一条消息并隐藏消息。

我的问题是，用户在很多图像上从左向右快速移动后，会执行图像的所有mouseover和mouseout事件，这看起来很愚蠢......

是否可以重新排列内部事件堆栈以避免这种情况，以便用户只执行当前事件（主要是第一个事件），然后执行最后一个事件（如果它不是同一类型？）

例如，如果执行鼠标悬停在第一个图像上并且鼠标移动位置在第一个图像旁边停留三次图像。我可以避免所有其他事件发生，因为鼠标停在图像上，鼠标悬停就像我用鼠标停止的那样。

如何避免这种多重事件发生？

Answer 1

您需要查看解决此问题的hoverIntent插件。

Answer 2

我们遇到了完全相同的问题，我们在mouseover事件上所做的是将变量_mouseOn设置为true（在mouseout上设置为false），然后在500秒内在该触发上设置oneTime事件。。一次性事件将检查_mouseOn是否为真并显示图像

    function Hover() {
  _mouseOn = true;
  $(document).oneTime(500, "500ms", functionToCheckTheMouseOnAndDisplayTheImage);
};

Answer 3

//Global timeout handle for mouseover and mouseout
var timeoutHandle;

$(document).ready(function() {

    BindMouseHover($(".helptext")); 

});//closing ready

//bind mouseover and mouseout actions on all elements 
function BindMouseHover(elements) {            
    $(elements).hover(
        function() {
            timeoutHandle = setTimeout('HandleMouseHover(true)', 1000);
        },
        function() {
            HandleMouseHover(false);
        }
    );
}

//Handle Mouseover and mouseout events
function HandleMouseHover(bDelay) {
    if (bDelay) {                
        $(".tooltip").show();
    }
    else {
        $(".tooltip").hide();
        clearTimeout(timeoutHandle);
    }
}

<强>说明：每个鼠标悬停计划在1000毫秒后调用 DelayedTooltip（*** true * ）**并将 setTimeout句柄保存到 timeoutHandle

如果 mouseout 在1000毫秒间隔内发生，则只需调用 clearTimeout（*** timeoutHandle * ）**即可取消 setTimeout

这可以很容易地扩展到适用于许多异构元素，并根据悬停的元素连接自定义工具提示文本。

Click here to know more about JavaScript Timing Events.

Answer 4

你不能也不应该试图避免发射事件。你应该避免的是你的代码通过做一些看起来很愚蠢的事情立即回应他们。例如，您可以使用鼠标悬停注册，使用某个控制器对象，用户当前所在的图像，并为触发实际行为的函数设置短暂超时（如果已经运行，则删除先前的超时）。 mouseout取消注册图像并删除超时。这样，当行为运行时，您只对最近用户所拍摄的图像进行操作。

Answer 5

我认为它更好（来自http://bavotasan.com/demos/fadehover/，谢谢）

<script> 
$(document).ready(function(){
    $(".a").hover(
    function() {
        $(this).stop().animate({"opacity": "0"}, "slow");
    },
    function() {
        $(this).stop().animate({"opacity": "1"}, "slow");
    });

});
</script>

如何避免大规模的onmouseover onmouseout射击？

5 个答案: