Обнаружение зависания мыши при загрузке страницы с помощью jQuery - PullRequest
Новая
       69

Обнаружение зависания мыши при загрузке страницы с помощью jQuery

5 голосов
/ 05 июля 2011

Я хотел определить, была ли мышь над элементом при загрузке веб-страницы.Похоже, что это невозможно с jQuery - при наведении курсора, наведении курсора и т. Д. Требуется движение мыши;как и получение текущей позиции мыши (для сравнения с границами элементов).

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

Ответы [ 4 ]

12 голосов
/ 06 июля 2011

Мое решение: добавьте новое значение CSS с помощью псевдоселектора hover, а затем проверьте его.Однако, похоже, это работает только иногда.

CSS: 

#el:hover {background-color: transparent; }

jQuery: 

if ($('#el').css('background-color') == 'transparent')
1 голос
/ 25 сентября 2013

Вот как я решил это: 

/** detect if the mouse was hovering over and element when the page loaded */
function detectHoverOnLoad(options) {
    var sel = options.selector

    if ($(sel + ':hover').length) {
        console.log('loaded while HOVERING over ' + sel)
    } else {
        console.log('loaded, but NOT hovering over ' + sel)
    }
}

тогда я назвал это так: 

detectHoverOnLoad({selector: '#headerNav'})

При дополнительном тестировании я заметил, что иногда, если мышь двигаласьон не всегда обнаруживал зависание, поэтому я добавил запасной вариант в остальном, чтобы обнаружить перемещение мыши над элементом: 

function detectHoverOnLoad(options) {
    var sel = options.selector

    if ($(sel + ':hover').length) {
        console.log('loaded while HOVERING over ' + sel)
    } else {
        console.log('NOT hovering')
        $(sel).one('mousemove', function (e) {
            if ($(e.target).parents(sel).length) {
                console.log('MOUSEMOVEed over ' + sel)
            }
        });
    }
}
0 голосов
/ 06 июля 2011

Почему бы и нет! :)

Вот мое решение:

DEMO

Код из демоверсии: 

function handler(ev) {
    var target = $(ev.target);
    var elId = target.attr('id');
    if( target.is(".el") ) {
       alert('The mouse was over'+ elId );
    }
}
$(".el").mouseleave(handler);
0 голосов
/ 05 июля 2011

РЕДАКТИРОВАТЬ: после тестирования я пришел к выводу, что это не будет работать. Сэкономьте время и попробуйте что-нибудь другое.

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

Это что-то вроде хака, но стратегия состоит в том, чтобы использовать element.offset () для получения координат элемента относительно документа вместе с element.width () & element.height () для создания ограничивающая рамка для положения мыши. Затем вы можете проверить значения событий .pageX и .pageY для этого ограничивающего прямоугольника.

Как вы правильно сказали, вам нужно событие, чтобы получить эти координаты, которое не работает для вас, так как вы хотите их немедленно. Тем не менее, вы рассматривали возможность подделки события щелчка мышью путем вызова $ ('# some-element'). Trigger ('click') после загрузки документа? Вы можете заранее зарегистрировать функцию, чтобы проверить ограничивающий прямоугольник с помощью $ ('# some-element) .click () и посмотреть, что он делает.

...