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

我有一个绑定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(); 

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

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

Answer 1

最好的方法是获取元素的左，右，顶部和底部偏移量，并查看鼠标位置是否位于这些值之间的任何位置。

例子 。

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

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

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

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

Answer 2

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

 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&&mouseXobjY&&mouseY 

Answer 3

使用jQuery 1.7+，您将要使用.on() ： http ： .on()

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

.live已弃用。 您也可以在.on中放置任何其他事件，具体取决于您的需求。 ：hover不起作用，因为它只适用于特定元素，它是基于CSS的。

在页面完成加载之前将此与偏移检测方法结合使用将使您获得所需的位置。

Answer 4

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

Answer 5

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

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

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

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

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

Answer 6

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