使用jQuery检测鼠标悬停在页面加载上

I wanted to detect whether the mouse was over an element when the web page was loaded. It appears this is not possible with jQuery - mouseover, hover etc. require a mouse move; as does getting the current mouse position (to compare with element bounds).

我想在加载web页面时检测鼠标是否在元素上。这似乎是不可能的jQuery -鼠标悬停，鼠标悬停等需要移动;以及获取当前鼠标位置(与元素边界进行比较)。

I have not seen this specific question asked, but have seen people saying the various bits of this aren't possible...

我还没见过有人问这个问题，但有人说这一切都是不可能的……

4 个解决方案

#1

My solution: add a new CSS value with the hover pseudoselector, then test for that. This seems to only work sometimes, however.

我的解决方案是:使用悬浮伪选择器添加一个新的CSS值，然后进行测试。然而，这似乎只是偶尔起作用。

CSS:

CSS:

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

jQuery:

jQuery:

if ($('#el').css('background-color') == 'transparent')

#2

Here is how I solved it:

我是这样解决的:

/** 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)
    }
}

then I called it like so:

然后我这样称呼它:

detectHoverOnLoad({selector: '#headerNav'})

With more testing, I noticed that at times, if the mouse was moving, it did not always detect the hover, so I added a fallback in the else to detect the mouse moving over the element:

通过更多的测试，我注意到，有时候，如果鼠标在移动，它并不总是能检测到鼠标的悬浮，所以我在else中添加了一个回退，以检测鼠标在元素上的移动:

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)
            }
        });
    }
}

#3

EDIT: after testing, I have concluded this will not work. Save yourself the time and try something else.

编辑:经过测试，我认为这将不起作用。省点时间，试试别的。

I think you can actually make the element bounding box work.

我认为你可以让元素边界框工作。

This is a bit of a hack, but the strategy is to use element.offset() to get the coordinates of the element relative to the document, along with element.width() & element.height() to create a bounding box for the mouse position. You can then check an event's .pageX and .pageY values against this bounding box.

这有点麻烦，但是策略是使用elelement .offset()获取相对于文档的元素的坐标，以及element.width()和element.element.height()来创建鼠标位置的边界框。然后，您可以针对这个边界框检查事件的. pagex和. pagey值。

As you correctly said, you need an event to get these coordinates, which doesn't work for you since you want them immediately. Nonetheless, have you considered faking a mouse click event by calling $('#some-element').trigger('click') after document load? You could register a function to check the bounding box via $('#some-element).click() beforehand and see what it does.

正如你正确地说过的，你需要一个事件来获得这些坐标，这对你来说是不适用的，因为你想马上得到它们。尽管如此，您是否考虑过在文档加载之后通过调用$('#some-element').trigger('click')来伪造鼠标单击事件?您可以预先注册一个函数，通过$('#some-element).click()检查边框，并查看它的作用。

#4

Why not! :)

为什么不呢!:)

Here is a solution of mine:

下面是我的一个解决方案:

DEMO

Code from the 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);