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

Posted 2023-05-08

【中文标题】使用 jQuery 在页面加载时检测鼠标悬停

【英文标题】：Detect mouse hover on page load with jQuery

【发布时间】：2011-09-28 23:50:54

【问题描述】：

我想在加载网页时检测鼠标是否在某个元素上。 jQuery 似乎无法做到这一点——鼠标悬停、悬停等需要鼠标移动；获取当前鼠标位置也是如此（与元素边界进行比较）。

我还没有看到有人问过这个具体的问题，但是看到有人说这是不可能的……

【参考方案1】：

我的解决方案：使用悬停伪选择器添加一个新的 CSS 值，然后对其进行测试。然而，这似乎只在某些时候有效。

CSS：

#el:hover background-color: transparent; 

jQuery:

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

【讨论】：

这比大多数解决方案更有效，也就是说永远不会，所以我认为这是你最好的选择。恶作剧网站过去肯定会使用它来确定您通过伪选择器访问过哪些网站，因此很高兴看到合法使用。

【参考方案2】：

我是这样解决的：

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

通过更多的测试，我注意到有时，如果鼠标在移动，它并不总是检测到悬停，所以我在 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)
            
        );
    

【讨论】：

刚刚尝试编写一个 JSFiddle 来测试它（jsfiddle.net/FB8se/4），但 JSFiddle 中的事件顺序似乎存在问题 - 因为它在尝试检测它是哪个元素后加载元素漂浮在上面 - 所以转移到 JSBin 并使用实时预览，但它似乎对我不起作用：jsbin.com/uGUYeQA/1

@IanGrainger 我无法谈论 JSFiddle 的内部工作原理，但它在现实世界中对我有用。

还有 jsbin？那样有用吗？如果没有，我做了什么不同的事情？

【参考方案3】：

编辑：经过测试，我得出结论这不起作用。节省自己的时间并尝试其他方法。

我认为您实际上可以使元素边界框起作用。

这有点小技巧，但策略是使用 element.offset() 来获取元素相对于文档的坐标，以及 element.width() 和 element.height() 来创建一个鼠标位置的边界框。然后，您可以对照此边界框检查事件的 .pageX 和 .pageY 值。

正如您所说的那样，您需要一个事件来获取这些坐标，这对您不起作用，因为您需要立即获得它们。尽管如此，您是否考虑过在文档加载后通过调用 $('#some-element').trigger('click') 来伪造鼠标点击事件？您可以预先注册一个函数以通过 $('#some-element).click() 检查边界框，然后查看它的作用。

【讨论】：

$('#some-element').trigger('click') 会给你当前的鼠标坐标吗？还是一些错误的、伪造的鼠标坐标？

经过一些测试，似乎在大多数情况下，我的疯狂想法通常不会生成坐标。由于 trigger() 触发的事件似乎没有填充 pageX 和 pageY 的值。

【参考方案4】：

为什么不呢！ :)

这是我的一个解决方案：

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

【参考方案5】：

我找到了世界上最简单的方法！ 忘记 JQ hover 使用它的 .mouseover 和 .mouseleave 并为它们定义函数，它不会在加载和加载后产生任何问题！

   $('li').mouseover(function () 
       codes
    


   $('li').mouseleave(function () 
       codes
   

【讨论】：

但正如我在帖子中所说，我已经在运行一个函数，我想知道鼠标在什么位置。不要等到鼠标移到某个东西上，这很容易！