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

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

3 голосов
/ 10 июня 2009

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

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

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

Ответы [ 3 ]

1 голос
/ 10 июня 2009

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

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

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

0 голосов
/ 16 ноября 2011

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

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

Я проверял это только в Chrome (webkit)

0 голосов
/ 10 июня 2009

У вас есть образец? Я предполагаю, что расположение элементов на странице блокирует событие 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>
...