Кто-нибудь знает трюк / альтернативу наведения мыши, которая срабатывает при прокрутке с помощью клавиатуры

Есть ли альтернативный метод или трюк для метода наведения, который может запускать функцию, когда курсор перемещается из одного div в другой, когда пользователь прокручивает страницу.

У меня вроде это работает, используя некоторый javascript (jQuery) в событии наведения текущего поста div. Однако я заметил, что событие наведения срабатывает только тогда, когда мышь действительно перемещается. Если страница прокручивается с помощью клавиатуры (страницы) вверх/вниз, она не срабатывает.

(Я могу отметить, что, например, sup.io нашел способ заставить это работать, но я не могу найти, как они это делают)


javascript hover mouse
person davur    schedule 10.06.2009    source источник
comment
Я не вижу, чтобы это работало на soap.io в Firefox. Какой браузер вы используете и какое поведение вы видите?   -  person David Citron    schedule 10.06.2009
comment
Извините, я мог бы быть яснее, я вижу. Вот дополнительная информация. Что я собираюсь сделать, так это: в блоге (davur.net) я показываю комментарии рядом с каждым постом, но у меня они затемнены до 0,30 непрозрачности. Но для текущего поста я хочу, чтобы комментарии исчезали до непрозрачности 1,00. В настоящее время это реализовано с помощью события hover. Но не срабатывает при прокрутке клавиатуры. Я сравниваю с супом.io то, что у них есть [ # | репост | реагировать | share ], который изначально скрыт, но отображается только в текущем сообщении. Это срабатывает как при наведении, так и при прокрутке клавиатуры.   -  person davur    schedule 11.06.2009
comment
Трюк с soap.io (как бы они его ни делали) срабатывает при прокрутке клавиатуры в Firefox 3.0, Safari 4, Chrome, IE8 (хотя и не стабильно), Opera 9.64 (хотя и с небольшой задержкой). Мой метод наведения работает с Firefox и Opera, но не с Chrome, IE или Safari.   -  person davur    schedule 11.06.2009

Ответы (3)


arrow_upward
1
arrow_downward

К сожалению, это довольно сложно; вы больше не можете полагаться на событие onMouseOver — единственное событие, которое срабатывает при прокрутке страницы, — это onScroll. Задействованные шаги:

  1. Пройдитесь по элементам, сохраняя каждую из их ширины, высоты и смещения (расстояние от левого/верхнего края экрана) в массиве.
  2. Когда событие onScroll запускается, проверьте последнюю известную позицию курсора по всем выбранным элементам (пройдите через массив) - если курсор находится над одним из элементов, вызовите обработчик.

Быстрый (ненадежный) прототип: http://pastie.org/507589

person James    schedule 10.06.2009
comment
Мне нравится эта идея. Лично мне нужны только высоты и смещения по оси y, так как div/posts перечислены вертикально. Я попробую. - person davur; 11.06.2009

arrow_upward
0
arrow_downward

У вас есть образец? Я предполагаю, что расположение элементов на странице блокирует событие mouseover. Мой простой пример ниже работает так, как вы описали. Когда курсор находится в верхней части страницы и используется навигация с помощью клавиатуры, запускаются события mouseover.

<html>
<body>
<script>
function log(text)
{
    document.getElementById('logger').value += text + "\n";
}
</script>

<div id="div1" style="background: yellow; height: 100px;margin-top: 100px" onmouseover="log('mouseover div1');">
div1
</div>
<textarea id="logger" cols="60" rows="12" style="float:right;"></textarea>
<div id="div2" style="background: red; height: 1000px" onmouseover="log('mouseover div2');">
div2
</div>
</body>
</html>
person Scott Stevenson    schedule 10.06.2009
comment
Это похоже на то, что у меня уже есть. Он не работает при прокрутке клавиатуры в Chrome, IE или Safari. - person davur; 11.06.2009

arrow_upward
0
arrow_downward

Вы ищете событие колесика мыши.

document.getElementById('myDiv').onmousewheel = function() {
  alert('You win!');
  alert('Seriously! It's just like that');
};

Я тестировал это только в Chrome (webkit)

person Devin Rhode    schedule 16.11.2011