Блог

Главная - Вопросы по программированию - Находится ли курсор над элементом (при загрузке страницы)?

Находится ли курсор над элементом (при загрузке страницы)?

#javascript #jquery

#javascript #jquery

Вопрос:

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

Есть ли другой способ определить, находится ли курсор над нужным элементом?

Комментарии:

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

2. Полагаю, я пришел сюда за помощью в обходе.

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

4. Если это важно для вас, поместите курсор куда-нибудь, определенное при загрузке. установите фокус где-нибудь.

Ответ №1:

Используя положение мыши при загрузке страницы, вы могли бы вызвать

 var currentElement = document.elementFromPoint(x, y);

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

 $(currentElement).trigger('hover');

Комментарии:

1. Проблема в этом — как вы получаете положение мыши при загрузке страницы, не перемещая мышь? Каждый пример, который я видел онлайн, показывает использование mousemove обработчика.

2. Я не верю, что вы можете … вы могли бы проверить событие onload и посмотреть, действительно ли оно предоставляет координаты мыши x и y, но я полагаю, что этого не произойдет. вы должны подождать, пока мышь немного переместится, прежде чем это сработает.

3. onload не предоставляет таких данных о событии.

Ответ №2:

Если вы скроете элемент (ы) до завершения загрузки страницы, а затем покажете их все сразу, сработает ли теперь ваше событие наведения курсора мыши?

 <div id='allmyelementsinhere' style='display:none'>

затем используйте javascript, чтобы удалить отображение: отсутствует при загрузке страницы.

Я думаю, что ваше mouseevent запустится, как только вы отобразите элементы.

Ответ №3:

У меня также была эта проблема с кнопками навигации next и previous, которые перемещаются между последовательно оформленными страницами.

Пользователь нажимал кнопку Далее, чтобы перейти на следующую страницу, и поскольку его мышь находилась в том же положении при загрузке страницы второй страницы, он мог снова нажать кнопку Далее, чтобы продолжить навигацию по коллекции страниц. По сути, удобный пользовательский интерфейс next / previous.

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

Итак, я добавил параметр url (action = ‘next или action = prev), а затем при загрузке я перевожу следующую или предыдущую кнопку в состояние наведения курсора, если присутствует соответствующий параметр url. Если пользователь каким-то образом переместил свою мышь и не находится над кнопкой, то вы неправильно получаете кнопку в состоянии наведения до первого события mousemove.

Он не идеален и подходит только для тех конкретных обстоятельств, когда пользователь использует согласованный пользовательский интерфейс на страницах вашего сайта, но поскольку этот тип пользовательского интерфейса довольно распространен, особенно в блогах / галереях, я бы упомянул об этом.

Ответ №4:

Вот метод jquery для отслеживания положения мыши, начиная с загрузки страницы.

 (function($) {
  $.mousePos = {x: 0, y: 0};
  var recordPos = function(e) {
    $.mousePos.x = e.pageX;
    $.mousePos.y = e.pageY;
  };
  $(document).mousemove(recordPos).mouseover(recordPos);
})(jQuery);

Это приведет к заполнению $.mousePos.x и $.mousePos.y как только мышь начнет взаимодействовать со страницей.

Ответ №5:

Комментарии:

1. Это та же проблема. Загрузите эту страницу и не двигайте мышью. Значения остаются равными нулю (по крайней мере, для меня). Ключом является строка document.onmousemove = getMouseXY;

2. Как именно это происходит при загрузке? Держите мышь на месте, и в полях будут отображаться 0 и 0.

3. Я тестировал в Chrome и IE8, и для обоих без перемещения мыши это сработало.

4. Честно говоря, это, кажется, работает в IE8 и FF — но в chrome есть 5-секундная задержка, поэтому я не увидел ее в первый раз. Своего рода противоречит цели.

5. Я думаю, ключевая строка, которую я пропустил, была if (!IE) document.captureEvents(Event.MOUSEMOVE)