使用Javascript检测页面加载时鼠标是否悬停在元素上

Question

我有一张图片，当鼠标悬停在上面时，我希望它能触发某些行为。我已经有了mouseover和mouseout方法，但是如果页面加载时恰好将鼠标悬停在图片上，那么mouseover方法直到你离开图片并重新悬停在上面之前都不会触发。

有没有一种方法可以实时检测鼠标是否悬停在元素上，而不需要鼠标离开元素然后再悬停在元素上来触发JS的mouseover事件？就像在Javascript中是否有类似document.getElementById("blah").mouseIsOver()的函数？

- cmcculloh

Answer 1

我相信这可以在用户不进行任何操作的情况下实现。当你的页面加载时，将 mouseover 事件绑定到你的图片上，并隐藏你的图片（即使用 CSS 的 display:none）。使用 setTimeout() 在几毫秒后再次显示它（10 应该足够了）。事件应该被触发。

如果你不想在你的图片上造成“闪烁”效果，你可以尝试使用一些临时元素，将事件附加到它上面，并将事件委托到你的图片上。

我不知道这是否是跨浏览器的解决方案，但它在我的 Firefox 3.0 控制台中起作用了 ;)

- wildcard

---

不错的解决方法。将其与.addEventListener("mouseenter", function)混合使用似乎是一个不错的解决方案。 - Paul

Answer 2

你可以使用mousemove事件。这将在用户移动鼠标时触发; 所以触发器不触发的唯一情况是用户根本不移动鼠标，这应该很少见。

唯一的问题是，当鼠标移动到您的图像上时，事件会触发，因此在组件上方移动时会得到大量这些事件。您可能需要在方法中实现某种标志，当事件触发时打开该标志，并在离开组件时关闭它。

这不是最理想的解决方案，但我认为这可能会满足您的问题场景。以下是一些快速伪代码，展示了该解决方案的样子，我认为它应该可以工作。

<img src="blah.png" onmousemove="JavaScript:triggerOn(event)" onmouseout="JavaScript:triggerOff(event)"/>


...

<script type='text/javascript'>

var TriggerActive = false;

function triggerOn(e){
  e = e||window.e;
  if( !TriggerActive){
    TriggerActive = true;
    // Do something
  } else {
    // Trigger already fired, ignore this event.
  }
}

function triggerOff(e){
  e = e||window.e;
  if(TriggerActive) 
    TriggerActive = false;
}

</script>

您可以在这里找到一些很棒的鼠标事件信息，包括浏览器兼容性说明。

- Mike Mytkowski

Answer 3

使用document.querySelectpor和onload/onready事件。

var a = document.querySelector('#a:hover');
if (a) {
   // Mouse cursor is above a
}
else {
   // Mouse cursor is outside a
}

- nintyfan

---

很好，它在Chrome和Firefox中运行。并且至少在IE v8以下版本中也可以运行。谢谢。 - barncat

Answer 4

除了监听鼠标事件（如mousemove、mouseover等），没有其他方法可以获取鼠标坐标。然而，这些事件非常敏感，只要将光标移动一个像素就足以触发它们，因此当光标静止悬停在您的图像上时，应该是相当不寻常的。

- slikts