鼠标移开后怎样让菜单在1秒后消失。

[daddi]

我使用setTimeout() 来延时一秒，但没有效果，不知道什么地方出错了，现列出基本代码，请大家指正。

首先，在DIV中添加了鼠标动作：<DIV id="xiexiedajia" onmouseover="showlink()" onmouseout="closelink()">

Javascript代码如下

function closelink(){window.setTimeout('closel()',1000);}
function closel(){document.getElementById("xiexiedajia").style.display="none";}

实现延时一秒的作用是当用户将鼠标点在菜单并往右移动时，偶尔可能移出菜单，这时候菜单就会消失，用户又要重新点开菜单，很不爽，希望能够在鼠标移出很短时间内菜单仍旧存在，这时候用户鼠标又移入时菜单还在。

当用户将鼠标移出超过1秒后就认为用户本身不想使用菜单了，这时候菜单就消失。

但现在使用以上代码没有效果，请指正。

[ccycxy123]

给你说个方法哈，我之前和你写的差不多，但是他就显示了，然后就消失了，没有效果。后来我用了jquery的效果函数就做成了。

     $("#xiexiedajia").delay(1000).fadeOut("slow");

上面的代码就是让他在1秒后消失
试试……

[daddi]

似乎不行呢。

[daddi]

fadeOut 的效果太丑了。
但是使用hide又没有延迟效果了。

[碧海情天-赵亮]

<style>
#theforever {width:300px;border:1px solid red;}
</style>

<DIV id="theforever" onmouseover="showtheforever=true;" onmouseout="showtheforever=false;closelink()">限你1秒内移回来，否则……我消失 囧</div>

<script type="text/javascript">
var showtheforever=false;
function closelink(){window.setTimeout('closel()',1000);}
function closel(){if(showtheforever)return;showtheforever=false;document.getElementById("theforever").style.display="none";}
</script>

[yuanyue0540]

[Quote=引用 4 楼 theforever 的回复:]
<style>
#theforever {width:300px;border:1px solid red;}
</style>

<DIV id="theforever" onmouseover="showtheforever=true;" onmouseout="showtheforever=false;closelink()">限你1秒内移回来，否则……我消失 囧</div>

……
[/Quote]

顶 ↑

[ccycxy123]

[Quote=引用 2 楼 daddi 的回复:]

似乎不行呢。
[/Quote]
要加jquery的包……网上搜一个放在script引用的第一就好了……

[conanhhy]

LZ可以用setTimeout来帮助解决。
把菜单隐藏或显示的代码写在function HiddenMenu中，之后通过setTimeout来实现

    setTimout("HiddenMenu();", 1000);

[qingshan002008]

[Quote=引用 6 楼 conanhhy 的回复:]
LZ可以用setTimeout来帮助解决。
把菜单隐藏或显示的代码写在function HiddenMenu中，之后通过setTimeout来实现

JScript code

setTimout("HiddenMenu();", 1000);
[/Quote]
正解

[meichen8050753]

用setTimeout

[蚂蚁上树]

4,6楼 都是正解！

[hch126163]

楼主的 div 内是否还有其它 标签？

一个选项卡效果，解决了这个问题，楼主可以借鉴一下

http://blog.csdn.net/hch126163/archive/2010/12/02/6050485.aspx

解决HTML内部元素的Mouse事件干扰

解决HTML内部元素的Mouse事件干扰

话说有一个DIV元素，其内部有一个IMG元素和SPAN元素，不用理会这两个内部元素怎么布局，这不是我要讨论的重点。

为了实现一些特殊的效果，我需要利用TD的onmouseover和onmouseout事件，测试时就会发现如下的状况：

当鼠标移入DIV内部时，onmouseover事件被触发；接着再鼠标移动到DIV内部的IMG或者SPAN元素之上，我们肯定不会认为这时鼠标已经移到了DIV的外边，但奇怪的是onmouseout事件触发了，而且紧接着onmouseover事件也马上被触发了。

这可不是我想要的，那么怎么来“屏蔽”内部元素给外层元素带来的Javascript事件干扰呢？

这里列举两种方法：

一. setTimeout

因为在鼠标移动到内部元素之上而触发了外层元素的onmouseout事件后，外层元素的onmouseover也会马上触发，所以我们只需要把外层元素的onmouseout事件需要执行的动作延迟很短的一段时间来运行，然后在onmouseover事件中再执行clearTimeout方法，这样就可以避免内部元素引起的事件干扰。

具体的执行过程请看下图（纵向的虚线表示时间）：


这是个很巧妙的的方法，因为当onmouseout触发后，实质性的方法并没有马上执行，而是要等待一小段时间。如果在这段时间里马上又触发了 onmouseover事件，那么基本上就可以肯定onmouseout事件的触发是因为内部元素的干扰了，所以在onmouseover事件中使用 clearTimeout来阻止延时的方法执行。

二.contains

在onmouseover时先进行如下判断，结果为true时再执行方法体：
var s = e.fromElement || e.relatedTarget ;
if(!this.contains(s)){MouseOverFunc()}

在onmouseout时先进行如下判断，结果为true时再执行方法体：
var s = e.toElement || e.relatedTarget ;
if(!this.contains(s)){MouseOutFunc()}


下面来解释一下上面两行代码的含义：

在IE中，所有的HTML元素都有一个contains方法，它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发，如果内部元素导致了不需要的事件被触发，那我们就忽略这个事件。

event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素；event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。

那么上面两行代码的含义就分别是：

○ 当触发onmouseover事件时，判断鼠标离开的元素是否是当前元素的内部元素，如果是，忽略此事件；

○ 当触发onmouseout事件时，判断鼠标进入的元素是否是当前元素的内部元素，如果是，忽略此事件；

这样，内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。

但问题又来了，非IE的浏览器并不支持contains函数，不过既然我们已经知道了contains函数的作用，就可以自行添加如下的代码来为非IE浏览器增加contains支持：

if(typeof(HTMLElement) != "undefined")

{

HTMLElement.prototype.contains = function(obj)

{

while(obj != null && typeof(obj.tagName) != "undefined")

{

if(obj == this)

return true;

obj = obj.parentNode;

}

return false;

};

}

[碧海情天-赵亮]

[Quote=引用 7 楼 qingshan002008 的回复:]
引用 6 楼 conanhhy 的回复:
LZ可以用setTimeout来帮助解决。
把菜单隐藏或显示的代码写在function HiddenMenu中，之后通过setTimeout来实现

JScript code

setTimout("HiddenMenu();", 1000);

正解
[/Quote]
正解??　想得太简单了。光这样的话，恰恰就错了（楼主可能就是因为这样才提问的吧）。注意看我的代码。

一旦你在鼠标离开时调用setTimout("HiddenMenu();", 1000);，那它在１秒后就一定会隐藏。
而你刚移出去就后悔了，于是马上移回来，因为onmouseover的作用，所以菜单又显示了，没问题，但等到那个１秒的时间后，它被隐藏了！在你希望看它的时候，没了。

所以setTimout("隐藏菜单();", 1000);　只是一个手续之一，还必须有其它控制来配合。

我设置了一个全局变量。当移出又马上移回来时，将这个变量设为不隐藏菜单，这样等１秒后调用隐藏菜单函数时，先判断这个变量，发现此时不应该隐藏，就不隐藏。

这样才能真正达到效果。当然这个全局变量可以替换成任何可能的更好形式（对象自定义属性，闭包成员变量），这是最简单易理解的方式。

[beowulf2005]

[Quote=引用 12 楼 theforever 的回复:]

引用 7 楼 qingshan002008 的回复:
引用 6 楼 conanhhy 的回复:
LZ可以用setTimeout来帮助解决。
把菜单隐藏或显示的代码写在function HiddenMenu中，之后通过setTimeout来实现

JScript code

setTimout("HiddenMenu();", 1000);

正解

正解??　想得太简单了。……
[/Quote]

用clearTimeout(id_of_settimeout) 来消除埋下的地雷不好么？

[Henry712]

fadeout() 效果不错阿

[碧海情天-赵亮]

用clearTimeout(id_of_settimeout) 来消除埋下的地雷不好么？

也可以，这也要使用变量来存放setTimout的句柄的，原理一样。


楼上兄弟，真会利用啊，呵呵

[一個程序員]

腾个地，晚上敲的代码。省的明天回公司再敲一遍，在这存一下。顺带着顶贴。

var tbl = document.createElement('table');
tbl.style.margin = tbl.style.padding = '0px';
tbl.cellpadding = tbl.cellspacing= "0";
tbl.style.border = '1px solid';
//tbl.style.width = this.width + 'px';
//tbl.style.height = '50px';
var row = tbl.insertRow(0);
var cel_left = row.insertCell(0);
cel_left.innerHTML = '1';
cel_left.style.width = '10px';
cel_left.style.backgroundColor = 'red';

var cel_mid = row.insertCell(1);

var cel_right = row.insertCell(2);
cel_right.innerHTML = '3';
cel_right.style.width = '10px';
cel_right.style.backgroundColor = 'red';

this.el.dom.parentNode.replaceChild(tbl,this.el.dom);

cel_mid.appendChild(this.el.dom);