您的位置:首页 > 其它

关于鼠标悬停,事件延时触发的解决

2014-03-03 15:56 232 查看
<ul id="psd_pointer_list">
<li>1</li>
<li>2</li>
</ul>


封装的js文件

// 鼠标悬停,事件延迟2秒执行
(function($){
$.fn.hoverDelay = function(options){
var defaults = {
hoverDuring: 200,
outDuring: 200,
hoverEvent: function(){
$.noop();
},
outEvent: function(){
$.noop();
}
};
var sets = $.extend(defaults,options || {});
var hoverTimer, outTimer, that = this;
return $(this).each(function(){
$(this).hover(function(){
clearTimeout(outTimer);
hoverTimer = setTimeout(function(){sets.hoverEvent.apply(that)}, sets.hoverDuring);
},function(){
clearTimeout(hoverTimer);
outTimer = setTimeout(function(){sets.outEvent.apply(that)}, sets.outDuring);
});
});
}
})(jQuery);


HTML文中调用方法

$.each($("#psd_pointer_list").find("li"), function(a, e){
$(e).hoverDelay({
hoverEvent: function(){
alert("ok");
}
});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: