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

Question

我使用这个基于 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拿出来执行。如何解决这个问题？

谢谢

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