Существует ли канонический способ создания события JS onHover с существующим onmouseover, onmouseout и некоторыми типами таймеров? Или просто любой способ запуска произвольной функции тогда и только тогда, когда пользователь наводил элемент на определенный промежуток времени.
Событие Javascript 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>
Ответ 2
Вы можете уточнить свой вопрос? Что такое "ohHover" в этом случае и как это соответствует задержке времени наведения?
Тем не менее, я думаю, что вы, вероятно, хотите...
var timeout;
element.onmouseover = function(e) {
timeout = setTimeout(function() {
// ...
}, delayTimeMs)
};
element.onmouseout = function(e) {
if(timeout) {
clearTimeout(timeout);
}
};
Или addEventListener
/attachEvent
или ваш любимый метод абстракции событий библиотеки.
Ответ 3
Если вы используете библиотеку JQuery, вы можете использовать событие .hover(), которое объединяет событие mouseover и mouseout и помогает вам с временными и дочерними элементами:
$(this).hover(function(){},function(){});
Первая функция - это начало наведения, а следующая - конец. Читайте больше на: http://docs.jquery.com/Events/hover
Ответ 4
Я не думаю, что вам нужен/нужен тайм-аут.
onhover (hover) будет определяться как период времени, а "над" что-то. ИМХО
onmouseover = start...
onmouseout = ...end
Для записи я сделал кое-что с этим, чтобы "подделать" событие hover в IE6. Это было довольно дорого, и в конце я бросил его в пользу производительности.