Javascript onHover 事件
Posted
技术标签:
【中文标题】Javascript onHover 事件【英文标题】：Javascript onHover event 【发布时间】：2010-09-20 17:39:42 【问题描述】：有没有一种规范的方法来使用现有的 onmouseover、onmouseout 和某种计时器来设置 JS onHover 事件？或者当且仅当用户将鼠标悬停在元素上一定时间时才触发任意函数的任何方法。
【问题讨论】：
【参考方案1】：这样的事情怎么样？
<html>
<head>
<script type="text/javascript">
var HoverListener =
addElem: function( elem, callback, delay )
if ( delay === undefined )
delay = 1000;
var hoverTimer;
addEvent( elem, 'mouseover', function()
hoverTimer = setTimeout( callback, delay );
);
addEvent( elem, 'mouseout', function()
clearTimeout( hoverTimer );
);
function tester()
alert( 'hi' );
// Generic event abstractor
function addEvent( obj, evt, fn )
if ( 'undefined' != typeof obj.addEventListener )
obj.addEventListener( evt, fn, false );
else if ( 'undefined' != typeof obj.attachEvent )
obj.attachEvent( "on" + evt, fn );
addEvent( window, 'load', function()
HoverListener.addElem(
document.getElementById( 'test' )
, tester
);
HoverListener.addElem(
document.getElementById( 'test2' )
, function()
alert( 'Hello World!' );
, 2300
);
);
</script>
</head>
<body>
<div id="test">Will alert "hi" on hover after one second</div>
<div id="test2">Will alert "Hello World!" on hover 2.3 seconds</div>
</body>
</html>
【讨论】：
你可以通过在函数参数中指定一个默认值来完全删除delay === undefined的if语句，比如function( elem, callback, delay = 1000)，【参考方案2】：
如果您使用 JQuery 库，您可以使用 .hover() 事件，该事件合并了 mouseover 和 mouseout 事件并帮助您处理时间和子元素：
$(this).hover(function(),function());
第一个函数是悬停的开始，下一个是结束。阅读更多： http://docs.jquery.com/Events/hover
【讨论】：
好建议！顺便说一下，我认为它实际上合并了 jQuery 的 mouseenter 和 mouseleave 事件（略有不同）。 问题中没有提到jQuery。【参考方案3】：我认为您不需要/想要超时。
onhover（悬停）将被定义为“over”某物的时间段。恕我直言
onmouseover = start...
onmouseout = ...end
为了记录，我已经做了一些事情来“伪造”IE6 中的悬停事件。它相当昂贵，最后我为了性能而放弃了它。
【讨论】：
我希望超时是为了防止当用户简单地将鼠标移到元素上时发生事件（例如意外，或者移动到界面的其他部分时。想象一下，如果点击 -要打开的菜单也是悬停打开的，但没有延迟；然后用户可能会遇到菜单在其他事物之上立即打开，而用户只是试图在页面上移动鼠标。 @IIsi 50MHz - 这很有可能，特别是如果 onmouseout 清除了类似于上面@Peter Bailey 回答的计时器。在我回答时，我在想 OP 可能对鼠标悬停/移出/进入/离开事件的工作方式感到困惑，并试图制作 The Complicator's Gloves：thedailywtf.com/Articles/The_Complicator_0x27_s_Gloves.aspx【参考方案4】：你能澄清你的问题吗？在这种情况下，什么是“ohHover”，它如何对应悬停时间的延迟？
也就是说，我想你可能想要的是……
var timeout;
element.onmouseover = function(e)
timeout = setTimeout(function()
// ...
, delayTimeMs)
;
element.onmouseout = function(e)
if(timeout)
clearTimeout(timeout);
;
或者addEventListener/attachEvent或者你喜欢的库的事件抽象方法。
【讨论】：
以上是关于Javascript onHover 事件的主要内容，如果未能解决你的问题，请参考以下文章
更改 CSS 样式 onHover 和 onClick 事件
CSS3 div onhover 显示删除图标，无 javascript，纯 CSS3
如何更改 React-Google-Maps 多边形的样式选项 onHover？