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

【问题标题】：delay mouseenter event and raise event if mouse inside the element如果鼠标在元素内，则延迟 mouseenter 事件并引发事件
【发布时间】：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。如何解决这个问题？

谢谢

【问题讨论】：

标签： javascript jquery asp.net html

【解决方案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;
        }
    });
});

【讨论】：