Question

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

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

问题是当load事件触发时，鼠标可能已经在元素上，因此在绑定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，这样您就不必移动鼠标）。当页面下次完全加载时，它应该以“Hover！”警告即使你没有移动鼠标。

或者更简单的方法。只需检查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中放置任何其他事件，具体取决于您的需求。：悬停不起作用，因为它只适用于特定元素，而且它是基于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
});

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

6 个答案: