当我在特定区域鼠标悬停 && mouseout 时，如何禁用/取消 setTimeOut？答案

【问题标题】：How can i disable/cancel setTimeOut when i mouseover && mouseout in specific areas?当我在特定区域鼠标悬停 && mouseout 时，如何禁用/取消 setTimeOut？
【发布时间】：2011-06-19 18:08:46
【问题描述】：

我有一个简单的水平菜单，有四个选项。当我将鼠标悬停在一个 div（例如 div A）上时，它的子项出现并且当我将鼠标移出特定的 div 时，它的子元素就会消失。

我已经为鼠标悬停放置了一个 setTimeOut 函数（大约是 300）。

在某些特定情况下，我想禁用 setTimeout

1. 当我 mouseout div A 和 i mouseover div B 时，我会不那个延迟，我只想展示 B 的 childDiv

2. 当我 mouseout div B 和我 mouseover div C 时，我会不那个延迟，我只想显示 C 的 childDiv

但是我怎样才能做到这一点呢？

只是我有一系列事件：（一个简单的算法）

If(mouseout(divA) && mouseover(divB))
   {
   disable setTimeOut;
   show(ChildDivB);  //with no delay
   }
else If(mouseout(divB) && mouseover(divC))
   {
   disable setTimeOut;
   show(ChildDivC);  //with no delay
   }

   }

一般情况下，当 i mouseover && mouseout 在 "foo" div 中时，（foo 是包含所有 div 的 div）settimeout 会被禁用。

这可以在jquery中完成吗？

我的代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
    .myDiv {
        border:1px solid red;
        height:30px;
        width:100px;
        float:left;
        }
    .myDivChild {
        display:none;
        width:300px;
        height:300px;

    }   
</style>

</head>

<body>
<div class="foo" style="background-color:#3300FF;width:900px;height:30px;margin-top:100px;">
    <div class="myDiv" style="background-color:red;margin-left:100px">A
        <div class="myDivChild" style="background-color:red">
            Child Div A
        </div>
    </div>
    <div class="myDiv" style="background-color:yellow">B
        <div class="myDivChild" style="background-color:yellow">
            Child Div B
        </div>
    </div>
    <div class="myDiv" style="background-color:green">C
        <div class="myDivChild" style="background-color:green">
            Child Div C
        </div>
    </div>
    <div class="myDiv" style="background-color:#00CCCC">D
        <div class="myDivChild" style="background-color:#00CCCC">
            Child Div D
        </div>
    </div>
</div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
        var interval;


    $('.foo > div').hover(function(){
                                    var $showDiv =     $(this).find('div');         
                                    interval = setTimeout(function(){
                                                                    $showDiv.show();
                                                                    },300);
                                    },
                        function(){
                                clearTimeout(interval);
                                $(this).find('div').hide();
                                });


</script>

</body>
</html>

【问题讨论】：

这个问题解决了吗？

标签： javascript settimeout jquery

【解决方案1】：

分配一个变量，然后像这样清除它：

var myInterval=setTimeout(...);

禁用：

clearTimeout(myInterval);

请注意，分配给 setTimeout 的变量具有清除超时的范围。此外，每个变量只包含一个区间。如果覆盖它，它将不会清除先前的超时。（除非它是具有多个键/属性的数组或对象，在这种情况下您无法清除整个数组/对象，您需要遍历它们并一次清除一个。）

【讨论】：

他已经有那么多了。事件处理程序才是真正的问题。

【解决方案2】：

你不能这样做

If(mouseout(divA) && mouseover(divB))

因为这些是事件，而不是变量。您需要做的是记录应用程序的状态，然后对该状态做出反应。例如，在 mouseOut 的事件处理函数中，设置一个变量

lastMouseOut = this;

然后，在mouseOver的事件处理函数中，你可以做你的比较：

if ((lastMouseOut==divA) && (this==divB)) {...}

确保 lastMouseOut 是全局变量，而不是处理函数中的局部变量。

【讨论】：

Travelboy：我认为他试图让人们更容易理解他的需求，而不是编写正确的代码。不过不确定。
是的，Jared，谢谢，我更正了。我年轻的时候写了太多的帕斯卡:)
我写了一个简单的算法来描述这个问题，我没有在jquery中使用它，只是为了用简单的语言理解我想要实现的目标

【解决方案3】：

这是我的例子：

CSS

#menu li {
    cursor: pointer;
}

#menu ul {
    display: none;
}

HTML

<ul id="menu">
    <li id="one" class="mainMenu">Menu 1
        <ul>
            <li>Submenu 1</li>
            <li>Submenu 2</li>
            <li>Submenu 3</li>
        </ul>
    </li>
    <li id="one"class="mainMenu">Menu 2
        <ul>
            <li>Submenu 1</li>
            <li>Submenu 2</li>
            <li>Submenu 3</li>
        </ul>
    </li>
    <li id="three"class="mainMenu">Menu 3
        <ul>
            <li>Submenu 1</li>
            <li>Submenu 2</li>
            <li>Submenu 3</li>
        </ul>
    </li>
</ul>

Javascript

$(function(){
    $('.mainMenu').hover(
        function(){doMenu(this)},
        function(){undoMenu(this)}
    );
});

function doMenu(el){
    switch (el.id) {
        case 'one':
        case 'two':
            $('ul', el).show();
        break;
        default:
            var menuTimeout = setTimeout(function(){$('ul', el).show()}, 300);
            $.data($('#menu'), 'menuTimeout', menuTimeout);
    }
}

function undoMenu() {
    $('#menu ul').hide();
    cancelTimeout($.data($('#menu'), 'menuTimeout'));
}

http://jsfiddle.net/XJhLD/

【讨论】：

感谢代码，我运行了代码，但只有当我将鼠标悬停在 menu3 上并且我也需要在其他地方时才会出现延迟，只有当我在特定 div 中将鼠标悬停和鼠标悬停时才会禁用 settimeout 跨度>
@programmer - 你必须看看代码是如何工作的。不想耽误的，按ID加个case；所有其他人都将采用默认情况。

【解决方案4】：

首先，你确定你想要一个下拉菜单？由于当今无鼠标设备非常普遍，例如 iPad，您至少需要一个备用解决方案。话虽如此，我可以说大约一年前I also struggled with this issue（见他们的主菜单）。

如果没有必要，不要像我一样重新发明轮子。您是否尝试过搜索小型 JS 插件/库？您可能希望使用 jQuery hoverIntent plugin 来处理延迟。

【讨论】：

我又看到了那个插件，但是我不想使用插件，我想尝试更多，谢谢
@Betamos - 我认为关于无鼠标设备的评论很有趣。你有更多信息吗？
@Jared 你的意思是关于无鼠标设备网络开发的信息吗？
@Betamos - 好吧，不一定。一些东西（博客文章？）描述了鼠标和无鼠标导航或其他东西之间固有的差异，也许有一些指导方针可以遵循。我认为这个特定问题将在未来呈指数级增长（随着设备的采用），我不确定网络开发人员是否真的做好了准备。
@Jared 实际上，许多 Web 应用程序以一种或另一种方式依赖于鼠标导航。我看过几篇相关的文章。Thoughts on Flash（第五点）有点相关。