Question

使用现有的onmouseover，onmouseout和某种计时器设置JS onHover事件是否有规范的方法？或者只是当且仅当用户在元素上悬停一段时间时才触发任意函数的任何方法。

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

Answer 2

你能澄清一下你的问题吗？在这种情况下什么是“ohHover”以及它如何对应于悬停时间的延迟？

那就是说，我想你可能想要的是......

var timeout;
element.onmouseover = function(e) {
    timeout = setTimeout(function() {
        // ...
    }, delayTimeMs)
};
element.onmouseout = function(e) {
    if(timeout) {
        clearTimeout(timeout);
    }
};

或addEventListener / attachEvent或您最喜欢的图书馆的事件抽象方法。

Answer 3

如果你使用JQuery库，你可以使用.hover（）事件合并mouseover和mouseout事件，并帮助你处理时间和子元素：

$(this).hover(function(){},function(){});

第一个功能是悬停的开始，下一个是结束。阅读更多： http://docs.jquery.com/Events/hover

Answer 4

我认为您不需要/想要超时。

onhover（悬停）将被定义为“超过”某些东西的时间段。 IMHO

onmouseover = start...

onmouseout = ...end

为了记录，我已经做了一些用来“伪造”IE6中的悬停事件。它相当昂贵，最后我放弃它以支持性能。

Javascript onHover事件

4 个答案: