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

jQuery: How to check if the mouse is over an element

提问by spb

I have a deferred function that binds a mouseenter event:

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

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

The problem is the mouse might already be over the element when the load event fires, hence before the mouseenter event was bound.
I can get around this by putting some code at the end of the page load handler to do a one-time check if the mouse is inside the element and trigger the mouseenter event manually:

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

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

How can I check if the mouse is over the element in the load event?

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

I tried $container.is(':hover')but it doesn't work.

我试过了，$container.is(':hover')但没有用。

采纳答案by spb

I went with the css hover solution in Detect mouse hover on page load with jQuerybecause it doesn't require the mousemove event.

我使用 jQuery 在页面加载时检测鼠标悬停中的 css 悬停解决方案，因为它不需要 mousemove 事件。

回答by Salt Hareket

i dont test it yet but think you want like this...

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

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

回答by Stone

With jQuery 1.7+ you're going to want to use .on(): http://api.jquery.com/on/

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

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

.live is deprecated. You could also put any other events in .on as well, depending on what you need. :hover doesn't work because it only works with specific elements and it's css based.

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

Using this in conjunction with an offset detection approach for before the page finishes loading will get you where you want to be.

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

回答by Purag

Best way to do this is to get the left, right, top, and bottom offset of the element and see if the mouse position lies anywhere between those values.

最好的方法是获取元素的左、右、上和下偏移，然后查看鼠标位置是否位于这些值之间的任何位置。

Example.

例子。

Put your mouse over the div the first time it loads. Then refresh the page (click F5 so you don't have to move the mouse). When the page loads fully next time, it should alert with "Hover!" even if you haven't moved your mouse.

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

Or an even easier way. Just check the e.target.idof the mousemove event (which apparently fires once the page loads, even without moving the mouse) against the idof the element, like so:

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

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

Example(do the same steps as above).

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

回答by Petr Peller

Mouseoverevent does exactly what you want.

鼠标悬停事件正是您想要的。

If the .conteinerdoes not exist in time you attach the mouseover event (is added dynamically in the future) you have to use .livemethod to attach the event.

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

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

It will work also when the mouse is already on the position, where the new element appears.Example here!

当鼠标已经位于新元素出现的位置时，它也将起作用。例子在这里！

For jQuery 1.7+ you should use .onmethod instead as the .live method is deprecated. Example here!

对于 jQuery 1.7+，您应该使用.on方法，因为 .live 方法已被弃用。例子在这里！

回答by Salt Hareket

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