jQuery：如何检查鼠标是否在元素上

Question

我有一个绑定 mouseenter 事件的延迟函数：

$(window).load(function(e) {
  var $container = $('.container');
  $container.mouseenter(function(e) {
    //do something
  });
  ...
});

问题是当加载事件触发时鼠标可能已经在元素上方，因此在 mouseenter 事件被绑定之前。
我可以通过在页面加载处理程序的末尾放置一些代码来解决这个问题，以一次性检查鼠标是否在元素内并手动触发 mouseenter 事件：

// check if the mouse is inside $container
if(mouse is inside $container)
  $container.mouseenter();

如何检查鼠标是否在加载事件中的元素上方？

我尝试了$container.is(':hover')，但它不起作用。

Answer 1

我还没有测试它，但认为你想要这样......

function checkMouseCollision(obj) {
    var offset = obj.offset();
    objX= offset.left;
    objY=offset.top;
    objW=obj.width();
    objH=obj.height();

    var mouseX = 0;
    var mouseY = 0;
    $().mousemove( function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
    });

    if((mouseX>objX&&mouseX<objX+objW)&&(mouseY>objY&&mouseY<objY+objH)){
        alert("hovered")     
    };
};
checkCollision($(".box"))

Answer 2

执行此操作的最佳方法是获取元素的左、右、上和下偏移量，并查看鼠标位置是否位于这些值之间。

Example.

第一次加载时将鼠标放在 div 上。然后刷新页面（单击 F5，这样您就不必移动鼠标了）。当页面下次完全加载时，它应该会发出“悬停！”的警报。即使您没有移动鼠标。

或者更简单的方法。只需检查 mousemove 事件的 e.target.id （显然在页面加载后触发，即使不移动鼠标）与元素的 id 对比，如下所示：

$(document).mousemove(function(e){
    if( e.target.id === 'hoverTest'){
        alert("Hovered!");
    }
});

Example（执行与上述相同的步骤）。

Answer 3

使用 jQuery 1.7+，你会想要使用 .on(): http://api.jquery.com/on/

$(document).ready(function(){
    $('body').on("mouseover", "your_element_selector_here", function() {
        // do stuff here
    });
});

.live 已弃用。您也可以将任何其他事件放入 .on 中，具体取决于您的需要。 :hover 不起作用，因为它只适用于特定元素并且它是基于 css 的。

在页面完成加载之前将此方法与偏移检测方法结合使用，可以让您到达想要的位置。

Answer 4

我选择了 Detect mouse hover on page load with jQuery 中的 CSS 悬停解决方案，因为它不需要 mousemove 事件。

Answer 5

Mouseover 事件完全符合您的要求。

如果.conteiner不存在你附加鼠标悬停事件（将来动态添加）你必须使用.live方法来附加事件。

$(".conteiner").live("mouseover", function() {
   alert("hovered!");
}) 

当鼠标已经在新元素出现的位置时，它也可以工作。 Example here!

对于 jQuery 1.7+，您应该改用 .on 方法，因为不推荐使用 .live 方法。 Example here!

Answer 6

$('.container').mouseover(function(e) {
    //do something
});