求助js鼠标悬浮事件：要求鼠标悬浮2秒才触发一个事件，不到2秒不触发。

现在正做个东西，是利用jquery的hover，来实现鼠标停留某处，一旦停留超过2秒就触发一个事件，不到2秒鼠标移走的话就不触发。一直没思路，求教！！！鸡鸡鸡啊！！！

解决方案 »

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

计时器，用一个变量存储。
如果页面上需要这个效果的地方比较多，也可以放到对象的attribute里面。计时器标识就是一个int值。
2秒后调用实际执行函数，不到两秒就clear掉。试一下呗。具体我也没做过。
str = setInterval(function () {
       //绑定out事件
            clearInterval(str);
        }, 2000);
也许可以不用调用clearInterval(str)然后在out事件里面处理一下  给绑定事件的那个DIV  移出事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
div{width:100px;height:100px;border:solid 1px red;}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var timer = null;
$(function(){
$("#test").hover(
function(){
$(this).html("悬停");
timer=setTimeout(function(){alert("hello")},2000);
},
function(){
if(timer)
clearTimeout(timer);
$(this).html("测试");
});
});
</script>
</head>
<body>
<div id="test">
测试
</div>
</body>
</html>
http://jsfiddle.net/ueesu/$(function() {
    var timer;
    $("input:button").hover(function() {
        var self = this;
        timer = setTimeout(function() {
            timer = 0;
            $(self).css("color", "red");
        }, 2000);
    }, function() {
        if (timer) {
            clearTimeout(timer);
            timer = 0;
            return;
        }
        $(this).css("color", "");
    });
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var timeout = '';
$('p').mouseover(function(){
timeout = setTimeout(function(){
alert('2秒')
},2000);
})

$('p').mouseout(function(){
clearTimeout(timeout)
})
})
</script>
<style type="text/css">
</style>
</head><body>
<p>11111111111111111111111111</p>
</body></html>
用问题啊！！2秒后， function(){
                $(this).html("悬停");
                timer=setTimeout(function(){alert("hello")},2000);
            },
            function(){
                if(timer)
                    clearTimeout(timer);
                $(this).html("测试");
                });
。同时发生了。我要的是2秒后第一个function发生，当鼠标离开后第二个function发生。
我试了你的代码没问题，可是放在我的程序中那个就有问题了，麻烦帮忙看下<html>
<head>
<script type="text/javascript" src="F:\workspace\JavaDemo\js\jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
var timer;
$("td[name='two']").each(
function(i){
$(this).hover(
function (){
timer=setTimeout(function(){timer = 0;alert("begin")},2000);
},
function(){
if(timer) {
clearTimeout(timer);
timer = 0;
return;
};
alert("end");
}
);
}
);
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>aaaaaaaaaa</td><td name="two">bbbbbbbbb</td>
</tr>
<tr>
<td>cccccccccc</td><td name="two">ddddddddd</td>
</tr>
</table>
<body>
</html>
正常的：alert对话框会使dom失去hover状态。用其他方式测试。
因为有alert导致失去焦点时触发了第二个事件。
将
$(this).html("测试");
放入if里就行了。直接改你这个。<html>
    <head>
    <script type="text/javascript" src="F:\workspace\JavaDemo\js\jquery-1.4.3.js"></script>
        <script type="text/javascript">
         $(function(){
            var timer;
            $("td[name='two']").each(
                function(i){
                    $(this).hover(
                        function (){
                            var obj =$(this);
//外面嵌套一个function，不做任何操作，setTimeout里放你自己的处理
timer=setTimeout(function(){obj.css({"backgroundColor":"red"});},2000);
                        },
                        function(){
                            if(timer) {
                                clearTimeout(timer);
                                $(this).css({"backgroundColor":""});
                            };
                        }
                    );
                }
            );
        });
        </script>
    </head>
    <body>
        <table border="1">
            <tr>
                <td>aaaaaaaaaa</td><td name="two">bbbbbbbbb</td>
            </tr>
            <tr>
                <td>cccccccccc</td><td name="two">ddddddddd</td>
            </tr>
        </table>
    <body>
</html>
使用setTimeout，配合onmouseover, onmouseout事件，纯javascript写了一个。不知楼主是否合适。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title></head><body onload="init()"><script language="javascript">var
  bIn = false,
  oHint;
  oTimer;

  function init()
  {
    oHint = document.getElementById("hinter");
    hideHint();
  }

  function onOut()
  {
    bIn = false;
    clearTimeout(oTimer);
  }

  function onOver()
  {
    bIn = true;
    oTimer = setTimeout("onTime()", 2000);
  }

  function onTime()
  {
    if(bIn)
    {
      oHint.style.display = "";
    }
  }

  function hideHint()
  {
    oHint.style.display = "none";
  }

  </script><table border="1" cellpadding="6" cellspacing="0"  onmouseover="onOver()" onmouseout="onOut()">
  <tr>
    <td><p>你敢在这<br />
    区域里停<br />
    两秒吗？</p></td>
  </tr>
</table>
<div style="position:absolute; display:inline; background:#999" id="hinter" onclick="hideHint()">你赢了<br>[关闭]</div>
</body>
</html>