Javascript onHover событие
Есть ли канонический способ настроить событие JS onHover с существующими onmouseover, onmouseout и какими-то таймерами? Или просто любой метод для запуска произвольной функции тогда и только тогда, когда пользователь зависал над элементом в течение определенного времени.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вы можете уточнить свой вопрос? Что в этом случае означает "ohHover" и как это соответствует задержке во времени зависания?
Тем не менее, я думаю, что вы, вероятно, хотите ...
var timeout;
element.onmouseover = function(e) {
timeout = setTimeout(function() {
// ...
}, delayTimeMs)
};
element.onmouseout = function(e) {
if (timeout) {
clearTimeout(timeout);
}
};
Или addEventListener / attachEvent, или метод абстракции событий вашей любимой библиотеки.
Я не думаю, что вам нужен / нужен тайм-аут.
onhover (зависание) будет определяться как период времени, когда что-то «над». ИМХО
onmouseover = start...
onmouseout = ...end
Для справки, я проделал кое-что с этим, чтобы «подделать» событие зависания в IE6. Это было довольно дорого, и в конце концов я отказался от него в пользу производительности.
@IIsi 50MHz - это вполне возможно, особенно если onmouseout очищает таймер, аналогично ответу @Peter Bailey выше. В то время, когда я ответил, я подумал, что OP, возможно, был сбит с толку относительно того, как работают события мыши на / выход / вход / выход, и пытался сделать перчатки Complicator: thedailywtf.com/Articles/The_Complicator_0x27_s_Gloves.aspx
Как насчет этого?
<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>
вы можете полностью удалить оператор if, где delay === undefined, указав в параметрах функции значение по умолчанию, например function( elem, callback, delay = 1000),
Если вы используете библиотеку JQuery, вы можете использовать событие .hover (), которое объединяет событие mouseover и mouseout и помогает вам с временными и дочерними элементами:
$(this).hover(function(){},function(){});
Первая функция - это начало наведения, а следующая - конец. Подробнее читайте на: http://docs.jquery.com/Events/hover
Отличный совет! Я думаю, что на самом деле он объединяет события mouseenter и mouseleave в jQuery (которые, кстати, немного отличаются).
jQuery в вопросе не упоминается.
Я ожидаю, что тайм-аут нужен для предотвращения событий, когда пользователь просто наводит указатель мыши на элемент (например, случайно или при переходе к какой-либо другой части интерфейса. Представьте себе, если бы меню, открываемые щелчком, также были наведены- для открытия, но без задержки; тогда пользователь может столкнуться с меню, мгновенно открывающимся поверх других вещей, в то время как пользователь просто пытается перемещать мышь по странице.