当使用Javascript加载页面时，检测鼠标是否位于某个元素上

我有一个图像，当鼠标悬停时，我想触发某些行为，我有一个mouseover和mouseout方法，但是如果您碰巧有鼠标悬停加载页面时的图像，直到您离开图像并回过来才会触发mouseover方法。当使用Javascript加载页面时，检测鼠标是否位于某个元素上

有没有一种方法来检测鼠标是否在运行中的元素上，而鼠标不必离开元素，然后通过元素来触发JS mouseover事件？像JavaScript中有一个document.getElementById（“blah”）。mouseIsOver（）类型的函数？

来源

2009-10-05 cmcculloh

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

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

我不知道如果这是跨浏览器的解决方案，但它从我的Firefox 3.0控制台;）

来源

2009-10-05 21:17:13 wildcard

很好的解决方法。将它与.addEventListener（“mouseenter”，函数）混合似乎是一个很好的解决方案。 – Paul 2017-11-29 20:54:43

除了侦听鼠标事件，无法获得鼠标坐标，即mousemove,mouseover等。但是，这些事件非常敏感，因为将光标移动一个像素就足以触发它们，所以让光标悬停在你的图像上，而完全仍然应该有点不寻常。

来源

2009-10-05 18:03:46 slikts

您可以使用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。

来源

2009-10-05 19:48:53

当使用Javascript加载页面时，检测鼠标是否位于某个元素上

回答

相关问题