如果鼠标在元素内，则延迟 mouseenter 事件并引发事件

Posted 2023-05-08

【中文标题】如果鼠标在元素内，则延迟 mouseenter 事件并引发事件

【英文标题】：delay mouseenter event and raise event if mouse inside the element

【发布时间】：2012-04-22 12:18:53

【问题描述】：

我使用这个基于jQuery开发的标签视图：

https://d2o0t5hpnwv4c1.cloudfront.net/001_Tabbed/site/jQuery.html#

我通过mouseenter 事件更改选项卡更改的代码。我想延迟mouseenter事件的执行，所以如果鼠标进入元素并在那里停留一段时间mouseenter执行else（如果鼠标在时间少于那部分时间）mouseenter不执行.我写了这段代码：

$(document).ready(function () 
        $('a.tab').on('mouseenter', function () 
            var thisElement = $(this);
            setTimeout(function () 
                $(".active").removeClass("active");
                thisElement.addClass("active");
                $(".content").slideUp();
                var content_show = thisElement.attr("title");
                $("#" + content_show).slideDown();
            , 300);
        );
    ); 

但是如果我将鼠标移出元素mouseenter excecutes。如何解决这个问题？

谢谢

【参考方案1】：

你需要存储超时句柄并在mouseleave上取消它：

var timeout; 

$(document).ready(function () 
    $('a.tab').on('mouseenter', function () 
        var thisElement = $(this);

        if (timeout != null)  clearTimeout(timeout); 

        timeout = setTimeout(function () 
            $(".active").removeClass("active");
            thisElement.addClass("active");
            $(".content").slideUp();
            var content_show = thisElement.attr("title");
            $("#" + content_show).slideDown();
        , 300);
    );

    $('a.tab').on('mouseleave', function () 
        if (timeout != null)  
           clearTimeout(timeout); 

           timeout = null;
        
    );
);