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

niuniu20008 2011-08-15 10:51:21

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

...全文

2344 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

fengyun817 2011-08-15

打赏
举报

因为有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>

王集鹄 2011-08-15

打赏
举报

[Quote=引用 10 楼 niuniu20008 的回复:]我试了你的代码没问题，可是放在我的程序中那个就有问题了，麻烦帮忙看下……[/Quote]

正常的：alert对话框会使dom失去hover状态。

用其他方式测试。

niuniu20008 2011-08-15

打赏
举报

[Quote=引用 5 楼 zswang 的回复:]
http://jsfiddle.net/ueesu/

JScript code

$(function() {
var timer;
$("input:button").hover(function() {
var self = this;
timer = setTimeout(function() {
……
[/Quote]
我试了你的代码没问题，可是放在我的程序中那个就有问题了，麻烦帮忙看下



<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>

niuniu20008 2011-08-15

打赏
举报

[Quote=引用 4 楼 fengyun817 的回复:]
HTML code

<!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">
<he……
[/Quote]
用问题啊！！2秒后， function(){
$(this).html("悬停");
timer=setTimeout(function(){alert("hello")},2000);
},
function(){
if(timer)
clearTimeout(timer);
$(this).html("测试");
});
。同时发生了。。。。我要的是2秒后第一个function发生，当鼠标离开后第二个function发生。

a124819202 2011-08-15

打赏
举报

学习。

gengchenhui 2011-08-15

打赏
举报

bjjs

MuBeiBei 2011-08-15

打赏
举报

<!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>

王集鹄 2011-08-15

打赏
举报

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", "");

    });

});

fengyun817 2011-08-15

打赏
举报



<!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>

小辛、 2011-08-15

打赏
举报

也许可以不用调用clearInterval(str)

然后在out事件里面处理一下给绑定事件的那个DIV 移出事件

小辛、 2011-08-15

打赏
举报



str = setInterval(function () {

       //绑定out事件

            clearInterval(str);

        }, 2000);

潮起潮落 2011-08-15

打赏
举报

计时器，用一个变量存储。
如果页面上需要这个效果的地方比较多，也可以放到对象的attribute里面。计时器标识就是一个int值。
2秒后调用实际执行函数，不到两秒就clear掉。

试一下呗。具体我也没做过。

bzm 2011-08-15

打赏
举报

使用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>

niuniu20008 2011-08-15

打赏
举报

[Quote=引用 11 楼 zswang 的回复:]
引用 10 楼 niuniu20008 的回复:我试了你的代码没问题，可是放在我的程序中那个就有问题了，麻烦帮忙看下……

正常的：alert对话框会使dom失去hover状态。

用其他方式测试。
[/Quote]
明吧了

niuniu20008 2011-08-15

打赏
举报

[Quote=引用 9 楼 niuniu20008 的回复:]
引用 4 楼 fengyun817 的回复:
HTML code

<!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/xh……
[/Quote]

这样啊，呵呵，以前不知道。