Question

我有一个图像，我希望在鼠标结束时触发某些行为，我有鼠标悬停和鼠标移动方法，但如果您在页面加载时碰巧将鼠标放在图像上，则鼠标悬停方法永远不会触发直到你离开图像并回过头来。

有没有办法检测鼠标是否在运行中的元素，而鼠标不必离开元素，然后越过元素触发JS鼠标悬停事件？就像Javascript中有document.getElementById（“blah”）。mouseIsOver（）类型函数一样？

Answer 1

我相信没有用户的任何操作，这是可能的。加载页面后，将mouseover事件绑定到您的图片并隐藏您的图片（即使用CSS display:none）。使用setTimeout()在几毫秒内再次显示它（10应该足够了）。应该解雇偶数。

如果您不想对图像造成“轻弹”效果，可以尝试使用一些临时元素，将事件附加到其上，然后将事件委托给您的图像。

我不知道这是否是跨浏览器解决方案，但它可以从我的Firefox 3.0控制台运行;）

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>

您可以找到一些出色的鼠标事件信息，包括浏览器兼容性说明here。

Answer 3

除了监听鼠标事件之外，没有办法获得鼠标坐标，即mousemove，mouseover等。但是，这些事件在将光标移动一个的意义上非常敏感像素足以触发它们，因此将光标悬停在图像上，同时完全仍然有点不寻常。

Answer 4

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

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

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

4 个答案: