43

既存の onmouseover、onmouseout、およびある種のタイマーを使用して JS onHover イベントを設定する標準的な方法はありますか? または、ユーザーが一定時間要素にカーソルを合わせた場合にのみ、任意の関数を起動する任意のメソッド。

4

4 に答える 4

30

このようなものはどうですか？

<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>
于 2008-11-04T19:50:39.727 に答える
17

あなたの質問を明確にすることができますか？この場合の「ohHover」とは何ですか?ホバー時間の遅延にどのように対応しますか?

そうは言っても、あなたがおそらく望んでいるのは...

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

またはaddEventListener/attachEventまたはお気に入りのライブラリのイベント抽象化メソッド。

于 2008-11-04T18:02:43.393 に答える
12

JQuery ライブラリを使用する場合は、mouseover と mouseout イベントをマージし、タイミングと子要素を支援する .hover() イベントを使用できます。

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

最初の関数はホバーの開始であり、次の関数は終了です。詳細については、http: //docs.jquery.com/Events/hoverをご覧ください。

于 2009-06-04T16:29:57.540 に答える
3

タイムアウトが必要だとは思わない/したくない。

onhover (ホバー) は、何かを「オーバー」している期間として定義されます。私見では

onmouseover = start...

onmouseout = ...end

記録のために、私はIE6でホバーイベントを「偽造」するためにこれでいくつかのことをしました。それはかなり高価で、最終的にはパフォーマンスを優先して捨てました。

于 2008-11-04T19:23:21.670 に答える