关于鼠标悬停,事件延时触发的解决
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"); } }); });
相关文章推荐
- 鼠标悬停(鼠标悬停一段时间后触发事件)一段时间后触发事件
- 鼠标悬停、事件触发试用,及信号发送
- 你真的了解html代码的事件,离开焦点和聚焦焦点的动作的意思吗?onblur、focus?它们是点击才可以触发,而不是鼠标悬停,鼠标悬停是hover
- 关于鼠标hover事件及延时
- 鼠标悬停,延后触发事件
- echars 自定义触发鼠标悬停事件
- GridView中鼠标悬停在某一列中触发事件
- 关于input的file框onchange事件触发一次失效的新的解决方法
- 解决方案:c#鼠标离开到子控件也触发MouseLeave事件的解决方法
- Selenium Webdriver JS事件在各浏览器的区别,彻底解决Selenium鼠标悬停 Mouseover和hover问题
- 解决IE 下div与img重叠无法触发鼠标事件的问题
- <a>标签,鼠标经过或者停留触发延时响应事件
- zf-关于荆州首页鼠标移动到导航栏上去触发的js 显示 问题解决办法
- 总结:解决鼠标经过内部元素触发onmouseout事件的问题
- 关于场景中的物件和鼠标事件的触发
- 鼠标悬停、事件触发试用,及信号发送
- 鼠标悬停一段时间再触发事件
- 关于input的file框onchange事件触发一次失效的新的解决方法
- 关于鼠标移动事件晃动问题解决方案
- IE9及以下 span元素无法触发鼠标事件解决办法