hover事件延迟处理方法

来源：互联网发布：tensorflow入门教程编辑：程序博客网时间：2024/05/28 05:16

先来说说项目中遇到的问题.
这里写图片描述
这里用的是bootstrap的框架，框架内tab切换是点击切换，但是需求换成鼠标滑过切换，点击进入全部列表。这里稍微修改下脚本。

    //  鼠标滑过tab切换    $(".widget-infoMode").each(function () {        var item = $(this).children(".nav-tabs").find("li");        $(item).mouseover(function () {            var _this = $(this).index();    $(item).eq(_this).find("a").stop(true,true).tab("show");        });        //  点击tab切换详情页        $(item).on("click", function () {            var href = $(this).find("a").attr("href");            if(href !== null || href !== undefined || href !== ''){                window.open(href);            }        })    });这里就会有问题，经常会碰到两个列表tab页在同一个页面展示的情况。

原因是hover绑定事件干扰，这里就需要对hover事件进行延时处理。
修改后的代码如下：

//  鼠标滑过tab切换$(".widget-infoMode").each(function () {    var hoverTimer;    var item = $(this).children(".nav-tabs").find("li");    $(item).hover(function () {        var _this = $(this).index();        hoverTimer = window.setTimeout(function(){            console.log(_this);            $(item).eq(_this).find("a").stop(true,true).tab("show");        },200);    }, function () {        clearTimeout(hoverTimer);    });    //  点击tab切换详情页    $(item).on("click", function () {        var href = $(this).find("a").attr("href");        if(href !== null || href !== undefined || href !== ''){            window.open(href);        }    })});

重点就是js的setTimeout方法，设置事件，延时触发函数，避免用户不经意的触发切换事件。

0 0