需要用jQuery 实现 在一个元素上鼠标移入延迟200毫秒触发事件,但是200不到则取消触发。用JS也可以

好久不写JS了,已经有些淡忘了。需要做的效果如题,目前我知道需要用到mouseover和mouseout两个事件。现在使用的是jQuery的doTimeout插件实现了鼠... 好久不写JS了,已经有些淡忘了。需要做的效果如题,目前我知道需要用到mouseover和mouseout两个事件。现在使用的是jQuery 的doTimeout插件实现了鼠标移入延迟加载。code 片段:$.doTimeout(200,function(){ alert(1);});
问题是在mouseover不到200秒,怎么取消事件。模糊的记忆中有个clearTimeout的东东还是什么。请大家赐教了。
展开
 我来答
wish4sun
2011-11-16 · TA获得超过280个赞
知道小有建树答主
回答量:181
采纳率:0%
帮助的人:230万
展开全部
在jquery中用hover(function(){},function(){})比较好,因为处理鼠标进入离开事件的话,用mouseover 和 mouseout会有bug,用hover的话,参数,前一个是进入的时候触发的函数,后一个是离开的时候触发的函数。
你的这个需求就是进入的时候设置一个settimeout,如果没到200毫秒就退出了,则在第二个参数的函数里面设置一个clearTimeout就可以了。
追问
我也很想用hover,只是目前UI框架使用的是easyui,我要加的元素是easui动态渲染出来的,如果用hover绑定元素,但是这个时候元素并没有生成。
追答
hover都用不了,那你用其他的不一样需要绑定元素么?不管是不是动态渲染出来的,只要你能获取到这个对象,然后给他bind这个方法就可以了。
至于说hover容易混乱,大家要知道,不管你用什么方法,都是针对某一个对象或者一组对象来实施的。从原理上来说,hover和mouseover mouseout或者是mouseenter mouseleave是一样的,我估计大家可能都不知道我所说的mouseover那个bug是什么,那个bug就是当你鼠标进入你设定的对象时,随着你的鼠标的轻微移动,会不停的触发over和out效果,但是hover就不会,只会触发一次。

总结的说,hover = mouseenter + mouseleave。你能用mouseenter就能用hover。
摩惠然0iD
推荐于2018-05-11 · TA获得超过1634个赞
知道小有建树答主
回答量:1162
采纳率:100%
帮助的人:835万
展开全部
$(function(){
$(target).mouseover(function(){
b=setTimeout(function(){代码...},200) ;
}).mouseout(function(){
clearTimeout(b)
}).
})
追问
这个有BUG:
$("#qqq").mouseover(function(){
b=setTimeout(function(){alert(1);},200) ;
}).mouseout(function(){
clearTimeout(b);
alert(2);
});
如果鼠标移入满200毫秒,会先执行mouseout里面的alert(2);再执行mouseover里面的alert(1)
追答
aler的出现顺序先说一下,出现在最前面的,包含这个aler的程序一定是最后执行的。这个例子比较特殊,因为浏览器一旦出现alert一类对话框就会将浏览器焦点改变,这个会触发元素的mouseout事件。所以换个方法测试
$(function(){
$("#qqq").mouseenter(function(){
$this=$(this);
b=setTimeout(function(){$this.css("background","red");},200) ;
}).mouseleave(function(){
clearTimeout(b);
$this.css("background","black")
});
})
这么个简单的程序从逻辑上想一下都能够想通,怎么可能出现你说的那种问题呢?我差点都被你忽悠了,还有wish4sun 所说的问题,hover以我目前的能力来说对多个元素根本不适用会造成逻辑混乱。不过也有相应的方法替代,就是mouseenter和mouseleave效果和hover一样。
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
丁巴什罗大神cy
2018-12-09 · TA获得超过1784个赞
知道小有建树答主
回答量:1525
采纳率:86%
帮助的人:635万
展开全部

mouseover/mouseout 与clearTimeout setTimeout结合使用时,确实有一个BUG,看下面这篇文章,里面关于这个bug描述的很详细,有完整的在线实例演示,还有解决的方法:

clearTimeout与mouseover/mouseout 或mouseenter/mouseleave结合使用时无效或闪烁的解决方法

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
罗巍
2011-11-16 · TA获得超过152个赞
知道小有建树答主
回答量:111
采纳率:100%
帮助的人:87.6万
展开全部
setInterval() 和 clearInterval() .
// js
var int;
function test(){
int setInterval("clock()",500) //循环调用函数
}
function test2(){
window.clearInterval(int) //取消调用
}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
静止的星辰
2011-11-16 · TA获得超过111个赞
知道小有建树答主
回答量:189
采纳率:0%
帮助的人:117万
展开全部
wish4sun 的说法如果是真的那这个算是一种解决办法了
我也在找这个答案 等下去测试
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(4)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式