延迟MouseEnter事件，如果引发事件的鼠标在元素内 [英] delay mouseenter event and raise event if mouse inside the element

问题描述

我用的开发基础上的jQuery这个分页浏览：

I use this tab view that developed base on jQuery:

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

我改变code制表符由的mouseenter 事件的变化。我想延迟的mouseenter 活动的执行，所以如果鼠标进入elemnt并在那里停留的时间部分的mouseenter 否则执行（如果鼠标外出时间不到时间的部分）的mouseenter 不execute.I写code：

I change the code that tabs change by mouseenter event. and I want to delay execution of the mouseenter event so if mouse enter the elemnt and remain there for portion of time mouseenter executes else (if mouse go outside in time less that that portion of time) mouseenter does not execute.I write this code:

$(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.How来解决这个问题？

but if I bring mouse out of element mouseenter excecutes.How to solve this problem?

感谢

推荐答案

您需要存储超时处理，并取消对鼠标离开：

You need to store the timeout handle and cancel it on 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;
        }
    });
}); 

这篇关于延迟MouseEnter事件，如果引发事件的鼠标在元素内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！