js如何控制鼠标放在div上3秒后才执行函数

页面代码如下：
<div id='a'>AAA</div>
<div id='b'>BBB</div>
<div id='c'>CCC</div>
<div id='d'>DDD</div>
要求：
当鼠标放在某个div上3秒不移出，则弹出一个提示框，把div里的内容提示出来，
如果鼠标划过一个div或在div上停留的时间没有3秒则不弹出对话框提示。
知道的大家互相学习下，要详细点，请不要只说简单的几个字，谢谢！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

jq有事件延迟的。主要靠clearTimeout,setTimeout实现
这是我收藏的一个例子，你试试<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
  <div id="show" style="width:100px;height:50px;border:1px solid gray">
    <div id="content" style="display:none">显示内容</div>
  </div>
</BODY>
</HTML>
用两个函数控制鼠标移到和移出DIV的事件，移到时用setTimeout延时3秒执行你要执行的函数，如果提早移出就把延时取消<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<div id="a" onmouseout="func_mout();" onmouseover="func_mover();">AAA</div>
<div id="b" onmouseout="func_mout();" onmouseover="func_mover();">BBB</div>
<div id="c" onmouseout="func_mout();" onmouseover="func_mover();">CCC</div>
<div id="d" onmouseout="func_mout();" onmouseover="func_mover();">DDD</div>
<script>
var t;
function func_mover()
{
t = setTimeout("f()","3000");
}
function f()
{
alert("123");
}
function func_mout()
{
clearTimeout(t);
}
</script>
</body>
</html>
if(typeof(HTMLElement)!='undefined')  // 给非IE 浏览器添加方法 contains
{
    HTMLElement.prototype.contains = function(obj)
    {
      while(obj && obj.tagName)
      {
            if(obj == this)
              return true;
            obj = obj.parentNode;
      }
            return false;
    };
} var $ = function (id,obj) {
    return 'string' == typeof(id) ? (obj||document).getElementById(id) : id;
};
var timer;
window.onload=function(){
var div=$("div1");
div.onmouseover=function(){var o=this;timer= setTimeout(function(){alert(o.innerHTML);},3000);};
div.onmouseout=function(e){
                e = e||event;
                e = e.toElement || e.relatedTarget ; // IE toElement  FF:relatedTarget
               if(typeof(e)!="undefined" &&!this.contains(e)){clearInterval(timer);
}
};
鼠标移出时，要判断，目标控件是否当前控件的子控件，移到div 的子元素也会触发 div 的 onmouseout！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
</head> <body>
<div id='a'>AAA</div>
<div id='b'>BBB</div>
<div id='c'>CCC</div>
<div id='d'>DDD</div>
<div id="tip" style="display:none;border:1px solid #ddd;padding:10px;"></div>
<script type="text/javascript">

</script>
</body>
</html>