Javascript onHover событие - PullRequest
Новая
       13

Javascript onHover событие

36 голосов
/ 04 ноября 2008

Есть ли канонический способ настроить событие JS onHover с существующими onmouseover, onmouseout и некоторыми таймерами? Или просто любой метод для запуска произвольной функции тогда и только тогда, когда пользователь наведет курсор на элемент в течение определенного промежутка времени.

Ответы [ 4 ]

26 голосов
/ 04 ноября 2008

Как насчет этого? 

<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>
13 голосов
/ 04 ноября 2008

Можете ли вы уточнить свой вопрос? Что такое «ohHover» в этом случае и как оно соответствует задержке времени наведения?

Тем не менее, я думаю, что вы, вероятно, хотите, чтобы ... 

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

Или addEventListener / attachEvent или метод абстракции событий вашей любимой библиотеки.

11 голосов
/ 04 июня 2009

Если вы используете библиотеку JQuery, вы можете использовать событие .hover (), которое объединяет события mouseover и mouseout и помогает вам с элементами синхронизации и дочерними элементами: 

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

Первая функция - начало наведения, а следующая - конец. Узнайте больше на: http://docs.jquery.com/Events/hover

2 голосов
/ 04 ноября 2008

Я не думаю, что вам нужно / нужно время ожидания.

onhover (зависание) будет определяться как период времени, в то время как «над» чем-то. ИМХО 

onmouseover = start...

onmouseout = ...end

Для справки, я сделал кое-что с этим, чтобы "подделать" событие hover в IE6. Это было довольно дорого, и в итоге я отказался от него в пользу производительности.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...